微信小程序的自定义组件（2）

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结构。

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

<view class="wrapper">
    <view>这里是组件的内部节点view>
    
    <slot>slot>
view>


<component-tag-name>
    
    <view>这里是插入到组件slot中的内容view>
component-tag-name>

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

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

<view class="wrapper">
    
    <slot name="before">slot>
    <view>这是一段固定的文本内容view>view>
    
    <slot name="after">slot>
view>

<my-test4>
  <view slot="before">这里是插入到组件slot中的内容view>
  <view slot="after">111view>
my-test4>

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

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

1. 属性绑定

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

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

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

2. 事件绑定

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

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

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

3. 获取组件实例

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

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

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
<view>在behaviors中定义的用户名：{{username}}</view>

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

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