文章目录

• 6. 组件的生命周期
• 7. 组件所在页面的生命周期
• 8. 组件插槽
• 9. 组件父子组件间的通信
• 10. 组件-behaviors

6. 组件的生命周期

created
attached
ready
moved
detached
error

在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。它们各自的特点
如下：

1. 组件实例刚被创建好的时候，created生命周期函数会被触发
   • 此时还不能调用setData
   • 通常在这个生命周期函数中，只应该用于给组件的thS添加一些自定义的属性字段
2. 在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
   • 此时，this.data已被初始化完毕
   • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
3. 在组件离开页面节点树后，detached生命周期函数会被触发
   • 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
   • 此时适合做一些清理性质的工作

lifetimes: {// 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名created: function () { },attached: function () { },detached: function () { },
},

7. 组件所在页面的生命周期

组件生命周期 | 微信开放文档 (qq.com)

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。例如：每当触发页面的shoW生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值。

show
hide
resize

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中，示例代码如下：

pageLifetimes:{show:function(){},//页面被展示hide:function(){},//页面被隐藏resize:function(size){}//页面尺寸变化
}

案例

methods:{_randomColor() {this.setData({_rgb: {r: Math.floor(Math.random() * 256),g: Math.floor(Math.random() * 256),b: Math.floor(Math.random() * 256)}})}
}, 
pageLifetimes: {show: function () {this._randomColor()}}

8. 组件插槽

在自定义组件的wxl结构中，可以提供一个节点（插槽），用于承载组件使用者提供的wxml结构。

在小程序中，默认每个自定义组件中只允许使用一个

这里是组件的内部节点

这里是插入到组件slot中的内容

在小程序的自定义组件中，需要使用多插槽时，可以在组件的js文件中，通过如下方式进行启用。

options:{multipleSlots:true//在组件定义时的选项中启用多slot支持
}

这是一段固定的文本内容view>
这里是插入到组件slot中的内容111

9. 组件父子组件间的通信

父子组件之间通信的3种方式

1. 属性绑定

   • 用于父组件向子组件的指定属性设置数据，仅能设置json兼容的数据

   // home.js - 父组件的data节点
   data:{count:0
   }// home.wxml - 父组件的wxml结构
    count={{count}}
   ~-~~
   父组件中，count值为：{{count}}
   

    // test4.js - 子组件的properties节点
   properties:{count:Number
   },methods: {addCount(){this.setData({count:this.data.count+1})}}// test4.wxml - 子组件的wxml结构
   子组件中，count值为：{{count}}
   +1
   

2. 事件绑定

   • 用于子组件向父组件传递数据，可以传递任意数据

   // 父组件 home.js
   syncCount(e) {this.setData({count: e.detail.value})
   },// 父组件 home.wxml
   // 父组件定义通过`bind:名称`的方式定义事件，传递给子组件 
   {count}}" bind:sync="syncCount"> 
   父组件中，count值为：{{count}}
   

   // 子组件 test4.js
   methods: {addCount(){this.setData({count:this.data.count+1})// 触发自定义事件，将数组传给父组件this.triggerEvent('sync',{value:this.properties.count})}
   }// 子组件 test4.wxml
   子组件中：count={{count}}
   +1

3. 获取组件实例

   • 父组件还可以通过this.selectComponent(id或class选择器)获取子组件实例对象
   • 这样就可以直接访问子组件的任意数据和方法

   // 父组件 home.js
   getChild() {const child = this.selectComponent('.customA')child.setData({count:child.properties.count+1})
   },// 父组件 home.wxml -> 给子组件设置class 或 id
   {count}}" bind:sync="syncCount" class="customA" id="cA"> 
   获取子组件实例
   

10. 组件-behaviors

behaviors | 微信开放文档 (qq.com)

Behavior(Object object) | 微信开放文档 (qq.com)

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins”。

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被
合并到组件中。

每个组件可以引用多个behavior,behavior也可以引用其它behavior。

// behaviors\my-behaviors.js
module.exports = Behavior({data: {username: 'zs'},properties: {},methods: {},behaviors:[]//引入其它的behavior
})

在组件中，使用require()方法导入需要的behavior，挂载后即可访问behavior中的数据或方法，示例代码
如下：

// component\test4\test4.js 与Component({})同级
const myBehaviors = require('../../behaviors/my-behaviors')Componet({behaviors: [myBehaviors],...
})
// componet\test4\test4.wxml
在behaviors中定义的用户名：{{username}}

组件和它引用的behavior中可以包含同名的字段，此时可以参考如下3种同名时的处理规则：

1. 同名的数据字段(data)
2. 同名的属性(properties)或方法(methods)
3. 同名的生命周期函数