自定义组件
组件的创建与引用
创建组件
1.在项目的根目录中，鼠标右键，创建components–>test文件夹
2.在新建的components–>test文件夹上，鼠标右键，点击“新建Component”
3.为新建的组件命名之后，会自动生成对应的4个文件，后缀名为.js,.json,.wxml,wxss
注意：尽量将不同的组件，存放在单独的文件夹中，从而保证清晰的目录结构
引用组件
1.在需要引用的组件的页面中，找到页面的.json配置文件，新增usingComponents节点
2.在usingComponents中，通过键值对的形式，注册组件；键为注册组件名称，值为组件的相对引用路径
3.在页面的.wxml文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示在页面上
注意：注册组件名称时，建议把名称注册为短横线连接的形式，例如vant-button或custom-button
使用样式美化组件
组件对应的wxss文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
1.组件和引用组件的页面不能使用id选择器，属性选择器和标签选择器，请改用class选择器
2.组件和引用组件的页面使用后代选择器，在一些极端情况会有非预期的表现，如遇，请避免使用
3.子元素选择器只能用于view组件与其子节点之间，用于其它组件可能导致非预期的情况
4.继承样式如font、color\会从组件外继承到组件内
5.除继承样式外，app.wxss中的样式、组件所在页面的样式对自定定义组件无效
组件的data与methods
使用data定义组件的私有数据
小程序组件中的data和小程序页面中的data用法一致，只不过：
1.页面中的data定义在Page()函数中
2.组件的data定义在Component()函数中
在组件的.js文件中：
1.如果要访问data中的数据，直接使用this.data.数据名称即可
2.如果要为data的数据重新赋值，调用this.setData({数据名称:新值})即可
在组件的.wxml文件中：
如果要渲染data中的数据，直接使用{{数据名称}}
使用methods定义组件的事件处理函数
和页面不同，组件的事件处理函数，必须定义在methods节点中。示例代码：
methods: {
xx:function(){
this.setData({
name: 'lz'
})
}
}
组件的properties
1.properties的作用
类似于vue组件中的props,小程序组件中的properties,是组件的对外属性，用来接收外界传递到组件中的数据。
在小程序中，组件的properties和data的用法类似，它们都是可读可写的，只不过：
1.data更倾向于存储组件的私有数据
2.properties更倾向于存储外界传递到组件中的数据
2.声明properties的两种方式
3.为组件传递properties的值
4.在组件内修改properties的值
数据监听器
什么是数据监听器
示例代码：
observers:{
'propCount,name':function(newpropcount,newname){
console.log('最新newpropcount值为', newpropcount),
console.log('最新newname值为', newname)
}
2.监听子数据字段的变化
3.使用通配符**监听所有子数据字段的变化
组件的生命周期
1.组件的主要声明周期
2.组件的全部生命周期函数
3.定义生命周期函数
4.组件所在页面的生命周期
示例代码
组件插槽
1.默认插槽
在组件的wxml中可以包含slot节点，用于承载组件使用者提供的wxml结构
默认情况下，一个组件的wxml中只能有一个slot。需要使用多个slot时，可以在组件js中声明
注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽
2.启用多个插槽
3.定义多个插槽
4.使用多个插槽
组件间的通信
组件之间的三种基本通信方式
2.this.selectComponent(string)
3.通过事件监听实现子向父传值
