微信小程序-传递数据子传父

在看到此篇文章之前，如果你学习过了 Vue，那么这个内容对你而言就是切菜一样简单，老样子，我们先搭建我们的组件，然后在来看需要介绍的知识点。

创建自定义组件

新建 c-demo:

页面的内容大致就是给一个 view 组件绑定了一个点击事件，点击的时候调用 onTitleTap，在组件当中方法的定义要写在 methods 当中这里是一个注意点，然后通过 mark:xxx 的方式传递了数据。

<!-- 
  c-demo.wxml
 -->
<view>
  <view 
  bindtap="onTitleTap"
  mark:abc="{{title}}"
  >我是 demo 的 title view {{title}}</view>
  <view>我是 demo 的 content view {{content}}</view>
</view>

JS:

在我们的触发方法当中，我们拿到了传递的数据，然后通过 this.triggerEvent("demoTitleClick", curTitle); 主动触发事件的方式传递了一个 title 数据给调用者。

// components/c-demo/c-demo.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    title: 'BNTang',
    content: 'BNTang content'
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTitleTap(e) {
      console.log("触发了 c-demo 的 onTitleTap", e);
      const curTitle = e.mark.abc;
      console.log("拿到了当前点击的标题内容：", curTitle);
      this.triggerEvent("demoTitleClick", curTitle);
    }
  }
})

首页的 WXML：

我在首页当中使用了上面新建的 c-demo 组件，绑定了在 c-demo 当中自定义的事件。

<!-- 
  index.wxml
 -->
<myDemo bind:demoTitleClick="sectionTitleClick"/>

首页的 JS：

在 c-demo 的自定义事件当中，传递了一个数据到事件对象中，这里我们可以通过 事件对象.detail 的方式进行获取数据。

// index.js
Page({
  sectionTitleClick(e) {
    console.log("页面监听到了组件触发的事件");
    console.log("在页面中拿到了自定义组件传递过来的数据", e.detail);
  }
})

总结

?> 想从组件中传递数据给页面，只需要在组件中通过 this.triggerEvent("自定义事件名称", "传递的数据"); 这种方式主动触发自定义事件，然后在页面使用这个组件的时候，绑定 triggerEvent 主动触发的自定义事件，就可以在绑定的自定义事件监听方法中，通过事件对象拿到组件传递过来的数据了。