微信小程序中通过事件,实现子组件向父组件中传递数据或操作

作者: wechat 发布时间: 2022-10-18 浏览: 1647 次 编辑

一、微信小程序中通过事件,实现子组件向父组件中传递数据或操作

注:子组件向父组件中传递通过事件传递操作

通过事件参数对象 detail 传递数据。

1. 组件中定义触发操作和传递的数据

<button bindtap='show'>
  显示内容
</button>
  /**
   * 组件的方法列表
   */
  methods: {
    //按钮点击事件
    show: function () {
      //触发外部事件,并传递数据
      var detail = {
        name: '张三丰'
      };
      this.triggerEvent('myshow', detail, { bubbles: false, composed: false });
    }
  }

2. 父组件中操作和接受传递数据

使用组件:

<show-box bind:myshow='showClick'></show-box>
  //组件接受操作
  showClick: function (e) {
    var name = e.detail.name;
    wx.showToast({
      title: name,
    })
  },