微信小程序 自定义组件的数据传递 父组件子组件传递值

1.父组件向子组件传递数据
parent.wxml

<my-component name="{
   {name}}" age="{
   {age}}"></my-component>

parent.js

data: {name: 'Peggy',age: 25
}

child.js

properties: {name: {type: String,value: '小明'},age: Number
}

父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{ {name}}的形式使用，而在js中以this.properties.name获取。

2.子组件向父组件传值
child.js

methods: {changeName() {this.triggerEvent('changeName', {name: '李四'})}
}

parent.wxml

<my-component name="{
   {name}}" age="{
   {age}}" bindchangeName="changeName">
</my-component>

parent.js

changeName(event) {console.log(event.detail)// { name: '李四' }
}

子组件向父组件传递数据使用this.triggerEvent方法，这个方法接受3个参数：
this.triggerEvent(‘myevent’, myEventDetail, myEventOption);

myevent为方法名，
myEventDetail是传到组件外的数据，
myEventOption为是否冒泡的选项，有三个参数可以设置：

bubbles    默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

在父组件监听事件bindchangeName=“changeName”，在changeName方法里有一个event参数，可以从event.detail里拿到组件内部传出来的值。