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里拿到组件内部传出来的值。