微信小程序--18（自定义组件3）

一、组件全部的生命周期函数

小程序组件可用的全部生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object error	每当组件方法抛出错误时执行

二、组件主要的生命周期函数

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

1.组件实例刚被创建的好的时候，created生命周期函数会被触发

• 此时不呢调用setData，且在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段。

2.在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发

• 此时，this.data已被初始化完毕，这个生命周期中绝大多数的初始化工作都可以在这个时机进行。

3.在组件离开页面节点树后， detached生命周期函数会被触发

• 退出页面时，会触发页面内每个自定义组件中的detached生命周期函数
• 此时适合做一些清理性质的工作

三、定义组件的生命周期函数（lifetimes节点）

在小程序中，生命周期函数可以直接定义在Component构造器的第一级参数中，可在lifetimes字段内进行声明

lifetimes:{
created(){
console.log('created')},
attached(){
console.log('attached')},
}

四、组件所在页面的生命周期

有时候，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

在自定义组件中，组件所在页面的生命周期函数有：

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在页面尺寸变化时执行

 五、监听所在页面的生命周期函数

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中

Component({
    pageLifetimes:{
        show:function() {console.log('show')},
        hide:function() {console.log('hide')},
        resize:function(size){console.log('resize') }
        }
})

六、插槽

在自定义组件中的wxml构中，可以提供一个<slot>节点，用于承载组件使用者提供的wxml结构。 

 1.单个插槽

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

对于不确定的内容，我们可以使用<slot>进行占位，具体内容由组建的使用者决定

<!--message.wxml文件中-->
<test4>
<view>
插槽填充
</view>
</test>

这个内容会填充到<slot>所在的位置 

<!--组件的.wxml 文件中-->
<view>

<view> 这个是组件的内部结构</view>

<slot></slot>
</view>

2.启用多个插槽

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

Component({
    options:{
        multipleSlots:true//组件定义时的选项中启用多slot
        }，
properties：{},
methods:{}})

3.定义多个插槽

可在组件的.wxml中使用多个<slot>标签，以不同的name来区分不同的插槽。

组件的.js文件中
<view class="wrapper">
<slot name="first"> </slot>
<view>---------</view>
<slot class="second"> </slot>
</view>

<!--message.wxml-->
<test4>
<view slot="first">通过first插槽进行填充</view>
</test4>