【微信小程序父子组件传值】
父组件传子组件
在父组件的json中设置子组件的路径
{
"usingComponents": {
"CompB":"../../components/CompB/CompB"
}
}
在父组件中设置自定义属性rmsg
<text>我是父组件</text>
<view>
<CompB rmsg="{{msg}}"></CompB>
</view>
data: {
//定义父组件的值
msg:"父组件传子组件",
}
在子组件中接收rmsg
//在子组件接收
<text style="font-size:50rpx;">{{rmsg}}</text>
Component({
/**
* 组件的属性列表
*/
properties: {
rmsg:{
type:String,
value:'默认值'
},
},
// 这种方式不可以传值
// properties:['rmsg'],
子组件修改父组件
在子组件中设置handler事件
<text style="font-size:50rpx;" bindtap="handler">{{rmsg}}</text>
methods: {
handler() {
// 点击子组件的text标签绑定triggerEvent 自定义一个ehandle事件 并传递参数
this.triggerEvent('ehandle', '子组件传父组件')
}
}
在父组件中设置自定义事件bindehandle
<view>
<!-- 绑定子组件传递的事件 在定义一个方法change -->
<CompB rmsg="{{msg}}" arr="{{arrList}}" bindehandle="change"></CompB>
</view>
change(e){
console.log(e.detail);
// 将父组件的数据修改 双向数据绑定给msg
this.setData({
msg:e.detail
})
},