## :-: 子父传参（组件向页面传参） > 在子组件中定义事件，向父组件传递任意数据 > 例：现将组件music.js下data内的msg传递给index页面 ### 1.在music.wxml添加点击事件 ``` <view bindtap="onShow"> 我是谁？ </view> ``` ### 2.在music.js方法列表写点击函数 ``` Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { msg: "you are beautiful" }, /** * 组件的方法列表 */ methods: { onShow(){ var msg = this.data.msg; // 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象,传递给父组件 this.triggerEvent('message',msg) } } }) ``` ### 3.在index.wxml绑定来自组件的事件，并给事件方法名 ``` <view class="container"> <v-music bind:message="onMshow"></v-music> </view> ``` ### 4.在index.js里便可以得到来自组件传递的参数 ``` Page({ data: { }, onMshow(e){ console.log(e.detail); // you are beautiful } }) ```