微信小程序父子组件传值

上篇文章记录了如何封装组件,以及使用,现在记录一下父子组件的相互通信。

父组件传值给子组件

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);
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值