## 自定义组件传参 ### 1.父子传参（页面向组件传参） 例子： **1.现在在index.js下data里有一个参数id(id: 1997)需要传递给组件music** ``` Page({ data: { id: 1997 } }) ``` **2.在index.wxml给组件定义一个属性来承载参数** 一旦给组件添加属性，那么若添加的属性想要在组件内使用，必须在组件属性列表`（properties:{}）`内注册 ``` <v-music id="{{id}}"></v-music> ``` **3.在组件music.js注册属性** 属性注册需要规定数据类型type（必填），也可以给默认值value ``` Component({ /** * 组件的属性列表 */ properties: { /* 简写方式：id: Number */ id: { type: Number } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } }) ``` **4.数据已经传递给了组件，现在可以看下效果了，在music.wxml展示** ``` <view>{{id}}</view> ``` ### 2.子父传参（组件向页面传参） 在子组件中定义事件，向父组件传递任意数据 例：现将组件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 } }) ```