微信小程序父子组件相互通信

父组件传值给子组件

  1. 在父组件中引用子组件
{
  "component": true,
  "usingComponents": {
    "alert-tip": "/components/alertTip"
  }
}
  1. 在父组件中,子组件的引用处
  • 绑定一个属性( tipmsg),并传递想要给子组件的值( tipmsg)
  • 绑定一个方法(bindconfirm)、并通过(modalConfirm)获取子组件传入的值
<alert-tip tipmsg="{{tipmsg}}" bindconfirm='modalConfirm'> </alert-tip>
  1. 在子组件中的js中使用 properties 获取值,就可以在子组件中用 this.data.tipmsg获取到值
Component({
  properties: {
    tipmsg:{
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    },
  }
 }) 

子组件传值给父组件

  1. 子组件在需要传值时,使用trriggerEvent传给父组件一个事件( myevent ),并传递想要给父组件的值( this.data.disName)
this.triggerEvent('confirm', this.data.disName)
  1. 在父组件中,子组件的引用处,通过这个confirm事件绑定一个方法( modalConfirm)
<alert-tip tipmsg="{{tipmsg}}" bindconfirm='modalConfirm'> </alert-tip>
  1. 在父组件的js中,定义这个方法modalConfirm,在方法内就可以获取到子组件传递过来的值
  modalConfirm(e) {
    // 这里面处理点击确定按钮业务逻辑
    console.log(e.detail.disName)
   } 
发布了70 篇原创文章 · 获赞 67 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_37896578/article/details/104671857