上篇文章记录了如何封装组件,以及使用,现在记录一下父子组件的相互通信。
父组件传值给子组件
1.在父组件引用的时候传值
其中title、bgColor、iconColor都是需要子组件接收的值
2.在子组件js文件中接收父组件传过来的值
3.在子组件wxml中使用
注意:::在 .js 的 Page 必须改为 Component ,通过 properties 才能拿到从父组件拿到数据。否则拿到不到数据。改为Component 后定义的方法必须放在methods中,否则报错
子组件传值给父组件
1.首先在子组件 .wxml 上定义事件
<view bindtap="myTab"></view>
2.子组件在需要传值时,使用 trriggerEvernt 传给父组件一个事件,并传递想要给父组件的值。
methods:{
myTab(){
this.triggerEvent("bindmyEvent", {son: "子组件给父组件传值"})
}
}
3.在父组件的 .wxml 中绑定自定义事件
<son tabs="{{tabs}}" text="我是父组件,传值给子组件" bindmyEvent="handleMyEvent"></son>
4.在父组件 .js 文件中与 data 平级,使用 handleMyEvent 事件,并传入 e
handleMyEvent(e){
console.log(e);
}