1. 父子关系：
父组件（Parent Component）和子组件（Child Component）之间的关系。
- 通信方式： 父组件可以通过在子组件上设置属性，将数据传递给子组件。子组件可以通过触发自定义事件，将数据传递给父组件。
- 示例：
<!-- parent.wxml -->
<child-component data-from-parent="{{parentData}}" bind:customEvent="onCustomEvent" />
// parent.js
Page({
data: {
parentData: 'Data from parent',
},
onCustomEvent: function (event) {
console.log('Data from child:', event.detail.childData);
},
});
// child-component.js
Component({
properties: {
dataFromParent: String,
},
methods: {
onTap: function () {
// 触发自定义事件，将数据传递给父组件
this.triggerEvent('customEvent', { childData: 'Data from child' });
},
},
});
2. 兄弟关系：
兄弟组件（Sibling Component）之间的关系。
- 通信方式： 通常通过父组件作为中介，将数据传递给两个兄弟组件，或者通过全局数据（getApp()）实现数据共享。
- 示例：
<!-- parent.wxml -->
<sibling1-component bind:customEvent="onCustomEvent1" />
<sibling2-component bind:customEvent="onCustomEvent2" />
// parent.js
Page({
onCustomEvent1: function (event) {
// 将数据传递给兄弟组件2
getApp().globalData.sharedData = event.detail.data;
},
onCustomEvent2: function (event) {
// 将数据传递给兄弟组件1
getApp().globalData.sharedData = event.detail.data;
},
});
3. 祖先后代关系：
祖先组件（Ancestor Component）和后代组件（Descendant Component）之间的关系。
- 通信方式： 后代组件可以通过 this.selectComponent 方法获取祖先组件的实例，然后调用祖先组件的方法。
- 示例：
<!-- ancestor.wxml -->
<descendant-component id="descendant" />
// ancestor.js
Page({
onLoad: function () {
this.descendantComponent = this.selectComponent('#descendant');
},
callDescendantMethod: function () {
this.descendantComponent.methodInDescendant();
},
});
// descendant-component.js
Component({
methods: {
methodInDescendant: function () {
console.log('Method in descendant component');
},
},
});
这些组件之间的关系决定了在小程序中如何进行数据传递和通信。合理利用这些关系，可以更好地组织和管理代码。详细的文档可以在[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html)中查阅。
转载请注明出处：http://www.zyzy.cn/article/detail/630/微信小程序