微信小程序的父子组件通信

在微信小程序中，父组件修改子组件属性的核心方式是通过属性绑定实现的。以下是详细实现方案：

一、核心机制：属性绑定与数据响应

1. 父组件数据绑定
   在父组件的 WXML 中，通过 {{ }} 语法将父组件的数据绑定到子组件的属性上：

   <child-component child-prop="{{parentData}}" bind:childEvent="handleChildEvent">child-component>
   

2. 子组件属性声明
   子组件通过 properties 接收父组件传递的属性，并定义类型和默认值：

   Component({
     properties: {
       childProp: {
         type: String,
         value: 'default value',
         observer(newVal, oldVal) {
           console.log(`属性变化: ${oldVal} -> ${newVal}`);
         }
       }
     }
   });
   

3. 父组件更新数据
   父组件通过 setData 修改绑定的数据，子组件属性会自动同步更新：

   Page({
     data: {
       parentData: 'initial value'
     },
   
     updateChildProp() {
       this.setData({
         parentData: 'new value' // 触发子组件属性更新
       });
     }
   });
   

二、高级用法：直接操作子组件实例

如果需要父组件直接调用子组件方法或修改内部数据，可以通过 selectComponent 获取实例：

1. 父组件获取子组件实例

   const childComponent = this.selectComponent('.child-component');
   

2. 调用子组件方法或修改数据

   // 调用子组件方法
   childComponent.resetData();
   
   // 直接修改子组件数据（不推荐）
   childComponent.setData({ internalData: 'new value' });
   

注意事项：

• 直接操作子组件实例会破坏组件封装性，仅建议在必要时使用
• 优先通过属性绑定和事件机制实现父子通信
• 子组件应通过 observer 监听属性变化并做相应处理

三、完整示例

1. 子组件定义（child-component）

// child-component.js
Component({
  properties: {
    count: {
      type: Number,
      value: 0,
      observer(newCount) {
        this.setData({ internalCount: newCount });
      }
    }
  },
  data: {
    internalCount: 0
  },
  methods: {
    increment() {
      this.setData({ internalCount: this.data.internalCount + 1 });
      this.triggerEvent('countChange', { value: this.data.internalCount });
    }
  }
});

2. 父组件使用

<child-component 
  count="{{parentCount}}" 
  bind:countChange="onCountChange"
  class="child-component"
>
  <button bindtap="incrementChild">增加子组件计数button>
  <button bindtap="directUpdate">直接更新子组件属性button>
child-component>

// parent.js
Page({
  data: {
    parentCount: 0
  },

  // 通过属性绑定更新
  incrementChild() {
    this.setData({
      parentCount: this.data.parentCount + 1
    });
  },

  // 直接操作子组件实例
  directUpdate() {
    const child = this.selectComponent('.child-component');
    child.setData({ internalCount: 999 }); // 直接修改内部数据
  },

  // 监听子组件事件
  onCountChange(e) {
    console.log('子组件计数更新:', e.detail.value);
  }
});

四、官方机制说明

1. 单向数据流

   • 父组件通过属性绑定传递数据给子组件
   • 子组件只能通过 this.setData 修改自身数据
   • 父组件不能直接修改子组件的 properties，只能通过更新绑定数据间接影响

2. 推荐通信模式

   • 父->子：属性绑定（{{ }}）
   • 子->父：事件绑定（bind:事件名 + triggerEvent）
   • 复杂场景：使用 selectComponent 获取实例，但需谨慎使用

3. 数据监听与响应

   • 子组件通过 properties.observer 监听父组件传递的属性变化
   • 父组件通过 setData 触发数据更新，子组件自动响应

通过上述方法，父组件可以安全、高效地与子组件进行数据交互。在实际开发中，应优先使用属性绑定和事件机制，保持组件的封装性和可维护性。如需直接操作子组件，建议通过暴露公共方法（如 resetData）来实现，而非直接修改内部数据。