微信小程序父子组件通信

1. 属性传值

属性传值是最常见、也是最基础的父子组件通信方式之一。在微信小程序中，父组件可以通过在子组件上绑定属性的方式向子组件传递数据，子组件则可以通过监听属性的变化来获取父组件传递过来的数据。

实现原理

1. 父组件在使用子组件时，在子组件的标签上通过设置属性传递数据，如：

<child-component data="{{someData}}"></child-component>

2. 子组件在接收父组件传递的数据时，通过定义properties来声明接收的属性，并可以在observer函数中监听属性的变化，如：

Component({
  properties: {
    data: {
      type: Object,
      value: {},
      observer(newVal, oldVal) {
        // 处理属性变化逻辑
      }
    }
  },
  // 其他代码
})

应用场景

• 父组件向子组件传递静态数据或配置信息。
• 父组件向子组件传递动态数据，如用户信息、商品信息等。
• 子组件根据父组件传递的数据来动态渲染内容。

注意事项

• 避免直接修改父组件传递过来的数据，应该通过子组件内部的方法进行数据处理和修改。
• 避免过度嵌套，减少组件之间的耦合度，提高组件的复用性。

2. 事件传递

除了通过属性传值外，父组件还可以通过事件的方式与子组件进行通信。父组件可以向子组件发送事件，并传递需要的数据，子组件则可以通过监听事件来接收数据并进行相应的处理。

实现原理

1. 父组件通过triggerEvent方法触发一个自定义事件，并传递需要的数据，如：

this.triggerEvent('customEvent', { data: someData });

2. 子组件在attached生命周期或propertiesObserver中监听父组件触发的事件，并在事件处理函数中获取传递过来的数据，如：

Component({
  attached() {
    this.bindEvent();
  },
  propertiesObserver() {
    this.bindEvent();
  },
  methods: {
    bindEvent() {
      this.onCustomEvent = this.onCustomEvent.bind(this);
      this.parent = this.getRelationNodes('../parent-component/index')[0];
      if (this.parent) {
        this.parent.on('customEvent', this.onCustomEvent);
      }
    },
    onCustomEvent(event) {
      const { detail: { data } } = event;
      // 处理事件数据
    }
  }
})

应用场景

• 父组件需要向子组件传递动态数据，并且需要在特定时机触发传递数据的行为。
• 子组件需要向父组件发送消息或触发某些操作。

注意事项

• 事件的传递是单向的，父组件向子组件传递数据，而不是相反。
• 子组件必须在监听事件之前确保父组件已经初始化完成，以避免出现数据传递失败的情况。在父组件中引用子组件的时候。使用wx:if判断数据是否已初始化完成