父子组件之间通信的 3 种方式
① 属性绑定
⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
② 事件绑定
⚫ 用于子组件向父组件传递数据，可以传递任意数据
③ 获取组件实例
⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法
下面给出三种方式的代码示例：
- 属性绑定：
在父组件的 wxml 文件中：
<child-component data="{{dataFromParent}}"></child-component>
在父组件的 js 文件中：
Page({
data: {
dataFromParent: {
name: 'Alice',
age: 25
}
}
});
在子组件的 properties 中定义：
Component({
properties: {
data: {
type: Object,
value: {}
}
}
});
- 事件绑定：
在子组件的 wxml 文件中触发事件：
<button bindtap="sendDataToParent">发送数据到父组件</button>
在子组件的 js 文件中定义事件：
Component({
methods: {
sendDataToParent: function() {
this.triggerEvent('sendData', {name: 'Bob', age: 30});
}
}
});
在父组件的 wxml 文件中绑定事件：
<child-component bind:sendData="handleReceiveDataFromChild"></child-component>
在父组件的 js 文件中定义事件处理函数：
Page({
handleReceiveDataFromChild: function(event) {
console.log(event.detail); // 输出：{name: "Bob", age: 30}
}
});
- 获取组件实例：
在父组件的 js 文件中获取子组件实例：
Page({
onLoad: function() {
this.child = this.selectComponent('#child');
},
handleButtonClick: function() {
console.log(this.child.data); // 输出子组件的 data 属性
this.child.doSomething(); // 调用子组件的 doSomething 方法
}
});
在子组件的 wxml 文件中给组件添加 id：文章来源：https://www.toymoban.com/news/detail-697658.html
<view id="child"></view>
在子组件的 js 文件中定义方法：文章来源地址https://www.toymoban.com/news/detail-697658.html
Component({
methods: {
doSomething: function() {
console.log('子组件执行了 doSomething 方法！');
}
}
});
到了这里，关于微信小程序父子组件之间通信的 3 种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
