微信小程序组件通信的几种方式

1.通过属性传递数据：父组件可以通过在子组件上绑定属性的方式，将数据传递给子组件。子组件可以通过使用properties属性接收父组件传递的数据，并在自身的逻辑中使用。

// 父组件
<child-component data="{{data}}"></child-component>

// 子组件
Component({
  properties: {
    data: {
      type: String,
      value: ''
    }
  },
  methods: {
    doSomething: function() {
      console.log(this.properties.data)
    }
  }
})

在上述代码中，父组件通过在子组件上绑定data属性的方式，将数据传递给子组件。子组件通过properties属性接收父组件传递的数据，并在自身的方法中使用。

2. 通过事件传递数据：子组件可以通过触发自定义事件的方式，将数据传递给父组件。父组件可以在子组件上监听自定义事件，并在事件处理函数中获取子组件传递的数据。

// 子组件
Component({
  methods: {
    sendData: function() {
      this.triggerEvent('customEvent', { data: 'Hello' })
    }
  }
})

// 父组件
<child-component bind:customEvent="handleCustomEvent"></child-component>

Page({
  handleCustomEvent: function(e) {
    console.log(e.detail.data)
  }
})

在上述代码中，子组件通过触发customEvent自定义事件的方式，将数据传递给父组件。父组件在子组件上监听customEvent事件，并在事件处理函数中获取子组件传递的数据。

3. 通过父组件调用子组件方法：父组件可以通过调用子组件的方法，向子组件传递数据。子组件可以在自身的方法中接收父组件传递的数据，并进行相应的处理。

// 子组件
Component({
  methods: {
    handleData: function(data) {
      console.log(data)
    }
  }
})

// 父组件
<child-component id="child"></child-component>

Page({
  sendDataToChild: function() {
    const childComponent = this.selectComponent('#child')
    childComponent.handleData('Hello')
  }
})

在上述代码中，父组件通过调用子组件的handleData方法，向子组件传递数据。子组件在自身的方法中接收父组件传递的数据，并进行相应的处理。

4. 通过全局变量：父组件和子组件都可以通过使用全局变量的方式，进行数据的共享和通信。父组件和子组件都可以访问和修改全局变量，从而实现数据的传递和共享。

// app.js
App({
  globalData: {
    data: 'Hello'
  }
})

// 父组件
const app = getApp()

Page({
  onLoad: function() {
    console.log(app.globalData.data)
  }
})

// 子组件
const app = getApp()

Component({
  methods: {
    doSomething: function() {
      console.log(app.globalData.data)
    }
  }
})

在上述代码中，父组件和子组件都通过getApp()方法获取到小程序实例app，并通过app.globalData访问全局变量data。父组件和子组件都可以在自身的方法中使用全局变量data。

以上是几种常见的子组件和父组件之间的通信方式，具体选择哪种方式取决于实际需求和开发的复杂度。在选择通信方式时，需要考虑数据的传递方向、数据的实时性、组件的层级关系等因素。同时，为了保证代码的可维护性和可读性，建议在通信过程中使用清晰的命名和注释，以便于后续的维护和调试。