5.自定义组件 - 纯数据字段
(1).什么是纯数据字段
概念: 纯数据字段指的是那些不用于界面渲染的data字段。
应用场景: 列如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件。仅仅在当前组件内部使用。带有这种特性的data字段适合设置为纯数据字段。
(2).使用规则
在Component构造器的options节点中，指定 pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。
6.自定义组件 - 组件的生命周期
(1).组件全部的生命周期函数
| 生命周期函数 | 参数 | 描述说明 |
created |
无 | 在组建刚刚被创建的时候执行 |
attached |
无 | 在组件实列进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完成后执行 |
| moved | 无 | 在组建实列被移动到节点树另一个位置时执行 |
detached |
无 | 在组件实列被从页面节点数移除时执行 |
| error | 无 | 每当组件方法抛出错误时执行 |
(2).组件主要的生命周期函数
在小程序组件中，最重要的生命周期函数有3个，分别是" created、attached、detached。"
- 组件实列
刚被创建好的时候，created生命周期函数会被触发
- 此时还不能调用 setData
- 通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段。
- 在
组件完全初始化完毕、进入页面节点树后,attached生命周期函数才会触发
- 此时，this.data已被初始化完毕
- 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行(比如: 请求获取初始化的数据)
- 在组件离开页面节点树后，detached生命周期函数会被触发
- 退出一个页面时，会触发页面内每一个自定义组件的detached生命周期函数
- 此时适合做一些清理性质的工作
(3).Lifetimes 节点
在小程序组件中，生命周期函数可以直接定义在Component构造器的第一季参数中，可以在lifetimes字段内进行声明(这是推荐的方式，其优先级最高)
lifetimes:{ created(){ console.log("被创建了") }, attached(){ console.log('所有的数据初始化完毕') } },
7.自定义组件 - 组件所在页面的声明周期
(1).什么是组件所在页面的周期
有时候，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的声明周期。
每当触发页面的show生命周期的函数时候，我们希望能够重新生成一个随机的RGB颜色值。
在自定义组件中，塑件所在页面的生命周期函数有如下3个:
生命周期函数 参数 描述 show 无 组件所在的页面被展示时执行 hide 无 组件所在的页面被隐藏时执行 resize object Size 组件所在的页面尺寸发生变化时执行
(2).pageLifetimes 节点
// components/test3/test3.js Component({ pageLifetimes:{// 页面在组件的生命周期 show(){ console.log('show') }, hide(){ console.log('hide') }, resize(){ console.log('resize') } }, lifetimes:{ // 组件的生命周期 created(){ console.log("被创建了") }, attached(){ console.log('所有的数据初始化完毕') } } })
(3).利用生命周期函数 生成随机的颜色
lifetimes:{ // 组件的生命周期 created(){ console.log("被创建了") }, attached(){ console.log('所有的数据初始化完毕') this.setData({ fullColor:Math.random()*256+','+Math.random()*256+','+Math.random()*256 }) console.log(this.data.fullColor) } },
8.自定义组件 - 插槽
(1).什么是插槽
再打自定义组件的wxml结构中，可以提供一个< slot>节点(插槽),用于承载组件使用者提供的wxml结构。
(2).使用单个插槽
在小程序中，默认每个自定义组件中只允许使用一个 < slot>进行占位，这种个数上的限制叫做单个插槽。
test4.js
<!--components/test4/test4.wxml--> <view> <view> 这里是组件的内部结构 </view> <!-- 1. 设置插槽 --> <slot></slot> </view>
home.wxml
<!--pages/home/home.wxml--> <text class="t1">首页</text> <my-test4> <view> 这是通过插槽填充的数据 </view> </my-test4>
(3).启用多个插槽
在小程序的自定义组件中，需要使用多 < slot> 插槽时，可以在组件的.js文件中。通过以下的方式进行启用,默认的是一个插槽:
test4.js
// components/test4/test4.js Component({ options:{ multipleSlots:true } })
test4.wxml
用name取别名
<!--components/test4/test4.wxml--> <view> <slot name="before"></slot> <view> 这里是组件的内部结构 </view> <!-- 1. 设置插槽 --> <slot name="after"></slot> </view>
home.wxml
通过slot属性进行绑定
<!--pages/home/home.wxml--> <text class="t1">首页</text> <my-test4> <view slot="before"> 这是通过插槽填充的数据 </view> </my-test4>
