一.父组件向子组件传值
以checkbox为例子,自定义一个checkbox组件,定义properties属性的checked值,当父组件checked值为true,则默认勾选。
父组件代码
<custom-checkbox position="right" checked="true">
hello,slot
</custom-checkbox>
子组件代码:
<checkbox class="checkbox" checked="{{isCheck}}"
bind:tap="update"></checkbox>
父组件将值传递到properties的checked属性,此时需要在JS中将checked的值赋给data中定义的isCheck才会使checkbox默认勾选
//使用data接收properties的值
observers:{
checked:function(newChk){
this.setData({
isCheck:newChk
})
}
}
二.子组件向父组件传值
1.子组件也就是自定义组件使用triggerEvent方法发射一个自定义事件,同时将可以将数据携带在event的detail参数里面
2.父组件可以在使用组建的过程中,使用bind绑定自定义事件进行数据的接收,bind:自定义事件
子组件发送数据:
/**
* 组件的初始数据
*/
data: {
ojb:{
name:'jerry'
}
},
/**
* 组件的方法列表
*/
methods: {
sendData(){
//发射自定义事件
this.triggerEvent('myEvent',this.data.ojb)
}
}
父组件接收数据:
首先进行事件绑定
<view>{{obj.name}}</view>
<custom05 bind:myEvent="getData"/>
在getData方法里面接收event事件参数,属性detail里面有子组件传递值
//获取子组件
getData(event){
console.log(event)
this.setData({
obj:event.detail
})
}
三.父组件通过selectComponent方法获取子组件对现象
在调用子组件的时候添加ID或者CLASS选择器comp
<custom-checkbox position="right" checked="true" bind:myEvent="getData"
class="comp" id="comp">
使用selectComponent方法获取子组件对象,数据放在对象的data属性里
需要注意的是class使用.class, id使用#id进行传值
getComponet(){
//获取组件对象 .class + #id
const res = this.selectComponent('.comp')
console.log(res.data.isCheck)
}