在看到此篇文章之前，如果你学习过了 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 主动触发的自定义事件，就可以在绑定的自定义事件监听方法中，通过事件对象拿到组件传递过来的数据了。
