uni-app学习--自定义组件

Vue.js的核心思想是数据驱动视图和组件化，组件是Vue非常重要的功能模块，其作用是拆分代码、代码复用等。简单概括，组件是一个单独且可复用的功能模块的封装。

本章结合官方组件使用说明使用说明进行概括。

使用组件的优势：

可以将组件进行任意次数的复用。
合理的划分组件，有助于提高应用性能。
代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
组件化开发能大幅度提高应用开发效率、测试性、复用性等。

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：

│─components            	符合vue组件规范的uni-app组件目录
│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│  		└─componentA.vue    可复用的componentA组件
│  └─component-a.vue      可复用的component-a组件

一、组件的创建

1.全局注册

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。nvue 页面暂不支持全局组件。

	// 1、main.js 里进行全局导入和注册
    import Vue from 'vue'
	import pageHead from './components/page-head.vue'
	Vue.component('page-head',pageHead)  //Vue.component 的第一个参数必须是静态的字符串。

	2、index.vue 里可直接使用组件

    <template>
		<view>
			<page-head></page-head>
		</view>
	</template>

2.局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。推荐使用 easycom 方式引入。

方式1——传统vue规范：在 index.vue 页面中，通过 `import` 方式引入组件，在 `components` 选项中定义你想要使用的组件。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
		export default {
			components:{uniBadge }//2.注册组件，这个组件变量名仅支持驼峰法命名（这步属于传统vue规范，但在uni-app的easycom下可以省略这步） 
		}
	</script>

方式2——通过uni-app的 easycom 。将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。组件就可以不用引用、注册，直接在页面中使用。easycom是自动开启的，不需要手动开启，有需求时可以在 `pages.json` 的 `easycom` 节点进行个性化设置。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		// 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
		export default {
			data() {
				return {
				}
			}
		}
	</script>

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

uni-app 搭建了组件的插件市场，有很多现成的组件，若下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。uni-app插件市场

二、组件之间的数据传递

父传子

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

1、当props为对象时

选项	类型	说明
type	`String` 、 `Number` 、 `Boolean` 、 `Array` 、 `Object` 、 `Date` 、 `Function` 、 `Symbol` ，任何自定义构造函数、或上述内容组成的数组	会检查一个 `prop` 是否是给定的类型，否则抛出警告
default	any	为该 `prop` 指定一个默认值。如果该 `prop` 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required	Boolean	定义该 `prop` 是否是必填项
validator	Function	自定义验证函数会将该 `prop` 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 `false` 的值 (也就是验证失败)，一个控制台警告将会被抛出

	<template>
		<view>
			<!-- 我是子组件componentA -->
			<view>{{age}}</view>
		</view>
	</template>
	<script>
		export default {
			props: {
				// 检测类型 + 其他验证
				age: {
					type: Number,
					default: 0,
					required: true,
					validator: function(value) {
						return value >= 0
					}
				}
			}
		}
	</script>

	<template>
		<view>
			<!-- 我是父组件 -->
			<componentA :age="10"></componentA>
		</view>
	</template>

2、当props为数组时

①传递静态Prop

②传递动态Prop

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

	<template>
		<view>
			<!-- 我是子组件componentA -->
			<view>{{normalizedSize}}</view>
		</view>
	</template>

	<script>
		export default {
			props: ['size'],
			computed: {
				normalizedSize: function () {
					return this.size.toLowerCase()
				}
			}
		}
	</script>

	<template>
		<view>
			<!-- 我是父组件 -->
			<componentA :size="size"></componentA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					size:"M"
				}
			}
		}
	</script>

子传父

子组件自定义事件通过$emit向父组件传参

将原生事件绑定到自定义组件

①在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 @事件的 .native 修饰符：

②当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

由上方可以看出当父向子传递变量是正常的，但是在子组件直接修改父传过来的变量会报错，不会同时响应到改变父的变量。原因是：props是单向数据流——所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

解决方法

第一种：子组件自定义事件通过$emit向父组件传参从而改变父级组件的传过来的值。（不做解说，参考上方子传父案例）

第二种：.sync 修饰符