首先说下自定义组件使用的好处，如果页面内的某一模块被很多页面重复使用，就可以将这一模块抽离出来封装成自定义组件，方便多个页面进行引用。这样将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
小程序的自定义组件跟普通的page一样，也是由wxml、wxss、json，js组成。新建一个名为components的文件夹，新建的自定义组件统一放在这个文件夹下。
json：
如果要使用自定义组件，要将json文件中component设置为true，如果要在组件中引用其他的自定义组件，可在usingComponents中定义。
{
"component": true,
"usingComponents": {
}
}
wxml:
组件模板的写法与page相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
1 如果业务需要对自定义组件A进行扩展，可在模板A中插入节点。默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用options: {multipleSlots: true }，以不同的 name 来区分。
<view >
<view>李雪琴你好，我是吴亦凡，别管我在哪，你看这灯多亮</view>
<slot name="shiliujie"></slot>
</view>
在组件A的JS中设置multipleSlots为true。
Component({
options: {
multipleSlots: true // 开启slot
}
})
在page页面中引用A组件，定义<slot>
<!-- 引用组件的页面模版 -->
<view>
<my-component>
<text slot="shiliujie">李雪琴你好，我是石榴姐，你吃饭没呢</text>
</my-component>
</view>
2 page可以向其包含的子组件传递数据。自定义的<my-component>组件的属性 propA 和 propB 接收页面传递来的数据。可以在page下的js中通过 setData 来改变绑定的数据。
小程序开发文档提示：这样的数据绑定只能传递 JSON 兼容数据。基础库版本2.0.9开始，还可以在数据中包含函数（但这些函数不能在wxml中直接调用，只能传递给子组件）。
<!-- 引用组件的页面模版 -->
<view>
<my-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
<text slot="shiliujie">李雪琴你好，我是石榴姐，你吃饭没呢</text>
</my-component>
</view>
Js:
这里定义了组件的事件。
Component({
/**
* 组件的生命周期（优先级最高）
*/
lifetimes: {
created(){
//在组件实例刚刚被创建时执行，此时还不能调用setData，只用于给组件this添加一些自定义属性字段。
},
attached() {
// 在组件实例进入页面节点树时执行。在组件完全初始化完毕、进入页面节点树后被触发。此时this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
},
ready(){
//在组件在视图层布局完成后执行
},
moved(){
//在组件实例被移动到节点树另一个位置时执行
},
detached() {
// 在组件实例被从页面节点树移除时执行。退出一个页面时，如果组件还在页面节点树中，则detached被触发。
},
error(){
//每当组件方法抛出错误时执行（参数：Object Error）
}
},
/**
* 组件所在页面的生命周期(与组件没有很强的关联，但有时组件需要获知，以便组件内部处理)
*/
pageLifetimes: {
show() {
// 组件所在的页面被展示时执行
},
hide() {
// 组件所在的页面被隐藏时执行
},
resize(size) {
// 组件所在的页面尺寸变化时执行(参数：Object Size)
}
},
/**
* 组件相关选项设置(例如slot节点的开启在这里设置)
*/
options: {
},
/**
* 组件的属性列表
*/
properties: {
myProperty: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
observer(newVal, oldVal, changedPath) {
// 属性被改变时执行的函数（可选），通常 newVal 就是新设置的数据， oldVal 是旧数
// 新版本基础库不推荐使用这个字段，而是使用 Component 构造器的 observer 字段代替（这样会有更强的功能和更好的性能）
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//组件中的变量要传递到page可以通过事件触发this.triggerEvent()来执行
},
/**
* 数据监听器,监听和响应任何属性和数据字段的变化
*/
observers: {
'numberA, numberB': function (numberA, numberB) {
// 在 numberA 或者 numberB 被设置时，执行这个函数
this.setData({
sum: numberA + numberB
})
}
},
/**
* 组件间关系定义
*/
relations: {
'./custom-li': {
type: 'child', // 目标组件的相对关系，可选的值为 parent、child、ancestor 、descendant
linked(target) {
// 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后
},
linkChanged(target) {
// 关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后
},
unlinked(target) {
// 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后
}
//target:如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联
}
}
})
使用组件：
在page中使用已定义的组件，首先要在json文件中声明。
"usingComponents": {
"people-select": "/components/people-select"
}
在wxml中进行组件的引用。
<view>
<people-select showModel="{{showModel}}" bindpeopleselect="onShow"></ people-select>
</view>
以上内容都是看小程序文档总结的，如果有不懂的地方，写一个小demo差不多就能理解了。
附开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
网友评论