一、组件定义
类似于页面,一个自定义组件是由四个文件组成的。
.wxml、.json、.js、.wxcc
首先需要在组件的json中进行自定义组件声明。
{
"component": true
}
二、使用组件
要求对应 json 文件中包含 usingComponents 定义段
{
"usingComponents": {
"son":"/components/son/son"
}
}
三、设置插槽、命名插槽<slot>
// 使用的时候// 父组件
<son> <view slot="名字"> </view> </son>
// 子组件中
<slot name="名字"></slot>
四、组件中的样式
组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:
组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
继承样式,如 font 、 color ,会从组件外继承到组件内。
除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。
五、父子组件传值
1、父组件给子组件传值
在子组件中定义属性,父组件在引用子组件的时候通过设置属性的方式给子组件传值
properties: {
// 复杂定义
name:{
type: String,
value:'张三丰'
},
// 简单定义
name2:String
2、子组件给父组件传值
在父页面中使用的子组件标签上绑定一个自定义事件
<test-button name="张无忌" bind自定义事件="事件名"></test-button>
在子组件中触发这个事件,可以给父组件传值。
子组件中通过triggerEvent触发事件
methods: {
方法名字: function(){
// 触发事件的选项
this.triggerEvent('自定义事件类型', 子组件要传给父组件的值)
} }
父组件中拿到传过来的值使用自定义事件就欧克。参数就是子组件传来的参数。
六、组件的生命周期
重要的生命周期是 created 、attached、 detached
组件实例刚刚被创建好时, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。