创建组件：
在项目根目录创建一个名为components 的文件夹，在文件夹中创建一个以组件名命名的子文件夹，在子文件夹上右键点击选择创建component 这时会在子文件夹内生成4个基础文件。
引用组件：
1.在需要引用组件的页面中，找到页面的.json 配置文件，新增usingComponents 节点
2.在usingComponents 中，通过键值对的形式，注册组件，键为注册的组件名称，值为组件的相对引用路径。
3.在页面的.wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示在页面上。
注意： 注册组件名称的时候，建议把名称注册为以短横线链接的形式，例如： vant-button 或custom-button
|
1
2
3
4
5
6
7
|
{ "usingComponents": { "test-com": "../../components/test/test" }}<test-com></test-com> |
使用样式美化组件：
组件对应wxss文件，只对组件内的节点生效，编写组件需注意：
1.组件和引用组件的页面不能使用id选择器，属性选择器[a]和标签名选择器，需该用class类选择器。
2.组件和引用组件的页面中使用后台选择器(.a b) 在一些极端情况下会有非预期的表现。如遇，请避免。
3.子元素选择器（.a>b） 只能用于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节点中，示例代码如下：
|
1
2
3
4
5
|
methods: { btnHandle: function () { console.log('test') }} |
组件的properties
1.properties 的作用
类似于vue组件中的props，小程序组件中的properties是组件对外的属性，用来接收外界传递到组件中的数据。
在小程序中，组件的proerties和data的用法类似，他们都是可读可写的只不过：
data更倾向于存储组件内的私有数据。
properties 更倾向于存储外界传递到组件的数据。
声明properties的两种方式：
Component({
properties: {
msg: "hello word"
}
})
Component({
properties: {
msg:{
type: string,
value: "hello word"
}
}
})
为组件传递properties 的值：
可以使用数据绑定的形式，向子组件的属性传递动态数据，示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 父组件<view> <test-com prop-a="data12312312" prop-b="{{abc}}"> </test-com></view>// 子组件 properties: { propA: String }<view>{{propA}}</view> |
组件中修改properties 的值：
小程序中，properties的值是可读可写的，他的用法与data一致，可以通过setData 修改properties 中的值。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
properties: { propA: String }, methods: { btnHandle: function () { this.setData({ propA : "abc123" }) } } |
数据监听器：
数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作，作用类似于vue中的wacth
数据监听器从小程序基础库版本2.61开始支持
监听器的基本语法如下：
|
1
2
3
4
5
|
observers: { "字段A,字段B": function (字段A新值, 字段B新值) { do something } }, |
组件的生命周期：
组件的生命周期，指的是组件滋生的一些函数，这些函数在特殊时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是， created, attached, detached 包含一个组件实例生命流程的最主要时间点。
+组件实例刚刚被创建好时： created 生命周期被触发，此时还不能调用setData。通常情况下，这个生命周期只应该用于该组件this添加一些自定义属性字段。
+ 在组件完全初始化完毕，进入页面节点树后，attached生命周期被触发，此时this.tata已被初始化完毕，这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
+ 在组件离开页面节点树后，detached 生命周期被触发，退出一个页面时，如果该组件还在页面节点树中，则detached会被触发。
组件可用的全部生命周期
created 组件刚刚被创建时执行
attached 组件实例进入页面节点树树执行
ready 组件在试图层布局完成后执行
moved 组件被移动到节点树另一个位置时执行
detached 组件从页面节点树移除时执行
error 组件方法抛出错误时执行
自定义生命周期函数：
生命周期方法可以直接定义在Component 构造器的第一级参数中。
自小程序基础库版本2.23起，组件的生命周期也可以在lifetimes 字段内进行声明（这是推荐的方法，优先级最高）
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Component({ lifetimes: { attached () { }, detached () { } },}) |
组件所在页面的生命周期:
有一些特殊的生命周期，他们并非于组件有很强的关联性，但有时组件需要获知，以便组件内部处理，这样的生命周期称为“组件所在页面的生命周期”，在pageLifetimes 定义段中定义，其中可用的生命周期包括：
show 组件所在页面被展示时执行
hide 组件所在页面被隐藏时执行
resize (object) 组件所在页面尺寸发生变化时执行。
组件插槽：
在组件的我先忙了中可以包含slot 节点，用于承载组件使用着提供的wxml结构。
默认情况下，一个组件的wxml中只能有一个slot，需要使用多slot时，可以在组件js中声明启用。
注意： 小程序目前只有默认插槽和多个插槽，暂不支持作用域插槽。