2023.05.17 | admin | 234次围观
父传子:
1.在父组件的wxml文件中使用子组件,并为其绑定一个自定义属性,其中custom-data是自定义的属性名,dataFromParent是父组件中的数据
<child-component custom-data="{{dataFromParent}}">child-component>
2.在子组件的js文件中通过properties字段声明要接收的属性,这里声明了一个名为customData的属性,并指定了其类型为String微信小程序url传值,初始值为空字符串。
// 子组件js
Component({
properties: {
customData: {
type: String,
value: ''
}
},
// ...
})
3.在子组件的wxml文件中使用customData属性,这里直接显示customData属性对应的值。这样,在父组件中修改dataFromParent的值后,子组件中的customData属性也会随之更新。
<view>{{customData}}view>
子传父:
1.在子组件中通过triggerEvent方法触发一个自定义事件,并将数据作为参数传递给父组件,这里在点击按钮后触发了一个名为myevent的自定义事件,并将data作为参数传递给了父组件
// 子组件js
Component({
// ...
methods: {
onTapBtn() {
const data = 'hi, parent'
this.triggerEvent('myevent', {data})
}
}
})
2.在父组件中使用子组件时,绑定要接收事件的函数,并在该函数中获取传递过来的数据微信小程序url传值,这里在子组件上绑定了myevent事件,并指定其对应的处理函数为onMyEvent。当子组件触发自定义事件后,父组件中的onMyEvent函数会被调用,并且可以通过event.detail获取到传递过来的数据。
<child-component bind:myevent="onMyEvent">child-component>
// 父组件js
Page({
onMyEvent(event) {
console.log(event.detail.data) // 输出 hello parent
}
})```
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论