6. 组件的生命周期

created
attached
ready
moved
detached
error

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

组件实例刚被创建好的时候，created生命周期函数会被触发
- 此时还不能调用setData
- 通常在这个生命周期函数中，只应该用于给组件的thS添加一些自定义的属性字段
在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
- 此时，this.data已被初始化完毕
- 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
在组件离开页面节点树后，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结构中，可以提供一个<slot>节点（插槽），用于承载组件使用者提供的wxml结构。

在小程序中，默认每个自定义组件中只允许使用一个<So心进行占位，这种个数上的限制叫做单个插槽。a

<!--·组件的封装者·-->
<view class="wrapper">
    <view>这里是组件的内部节点</view>
    <!--·对于不确定的内容，可以使用<s10t>进行占位，具体的内容由组件的使用者决定-->
    <slot></slot>
</view>

<!--·组件的使用者·-->
<component-tag-name>
    <!--~这部分内容将被放置在组件<S1ot>的位置上-->
    <view>这里是插入到组件slot中的内容</view>
</component-tag-name>

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

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

<!--·组件模板-->
<view class="wrapper">
    <!--name为before的第一个slot插槽-->
    <slot name="before"></slot>
    <view>这是一段固定的文本内容</view>view>
    <!--name为after的第二个slot插槽-->
    <slot name="after"></slot>
</view>

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

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

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

属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置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>

事件绑定

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

// 父组件 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>

获取组件实例

父组件还可以通过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>