## 自定义组件开发 ### 创建自定义组件 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）： ~~~ { "component": true } ~~~ 注册页面的写法 ~~~ Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod() {} } }) ~~~ 使用自定义组件 ~~~ { "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } ~~~ ### 组件的主要生命周期 ~~~ Component({ lifetimes: { attached() { // 在组件实例进入页面节点树时执行 }, detached() { // 在组件实例被从页面节点树移除时执行 }, }, // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 attached() { // 在组件实例进入页面节点树时执行 }, detached() { // 在组件实例被从页面节点树移除时执行 }, // ... }) ~~~  组件所在页面的生命周期  ~~~ Component({ pageLifetimes: { show() { // 页面被展示 }, hide() { // 页面被隐藏 }, resize(size) { // 页面尺寸变化 } } }) ~~~ ### 组件间通信与事件 父组件=>子组件通信 prop-参数名 ~~~ <view> <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view> ~~~ ~~~ Component({ properties: { myProperty: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个 observer(newVal, oldVal, changedPath) { // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange' // 通常 newVal 就是新设置的数据， oldVal 是旧数据 } }, myProperty2: String // 简化的定义方式 }, ~~~ 组件上绑定事件 ~~~ <!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以写成 --> <component-tag-name bind:myevent="onMyEvent" /> ~~~ 组件内部触发外部绑定事件 ~~~ Component({ properties: {}, methods: { onTap() { const myEventDetail = {} // detail对象，提供给事件监听函数 const myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption) } } }) ~~~ ### behaviors behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。 ~~~ // my-behavior.js module.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached() {}, methods: { myBehaviorMethod() {} } }) ~~~ ~~~ // my-component.js const myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached() {}, methods: { myMethod() {} } }) ~~~ ### 插槽 ~~~ <view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> </view> ~~~ ~~~ <!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view> ~~~ 默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。 此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。 ~~~ <!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view> ~~~ ~~~ <!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </component-tag-name> </view> ~~~ ### 组件间关系 定义和使用组件间关系 ~~~ <custom-ul> <custom-li>item 1</custom-li> <custom-li>item 2</custom-li> </custom-ul> ~~~ ~~~ // path/to/custom-ul.js Component({ relations: { './custom-li': { type: 'child', // 关联的目标节点应为子节点 linked(target) { // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后 }, linkChanged(target) { // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后 }, unlinked(target) { // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后 } } }, methods: { _getAllLi() { // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的 const nodes = this.getRelationNodes('path/to/custom-li') } }, ready() { this._getAllLi() } }) ~~~ ~~~ // path/to/custom-li.js Component({ relations: { './custom-ul': { type: 'parent', // 关联的目标节点应为父节点 linked(target) { // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后 }, linkChanged(target) { // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后 }, unlinked(target) { // 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后 } } } }) ~~~ 注意：必须在两个组件定义中都加入relations定义，否则不会生效