利用微信小程序的事件机制实现子组件向父组件传值

一、 父组件向子组件传值

在微信小程序开发中，我们可以通过property属性来实现从父组件传递数据到子组件。在组件内部，可以通过this.properties来获取父组件传递的数据。

  // 父组件 index.js
  Page({
    data: {
      message: 'Hello World'
    }
  })

  // 子组件 my-component.js
  Component({
    properties: {
      message: String
    },
    methods: {
      changeMessage() {
        this.setData({ message: 'Hello Component' })
      }
    }
  })

  
  

二、 子组件向父组件传值

对于需要子组件向父组件传值的情况，我们可以利用微信小程序的事件机制实现。子组件通过自定义事件来触发父组件中的方法，并把相关数据以参数的形式传递给父组件。

  // 父组件 index.js
  Page({
    data: {
      message: ''
    },
    handleMessageChange(e) {
      let value = e.detail.value
      this.setData({ message: value })
    }
  })

  // 子组件 my-component.js
  Component({
    methods: {
      changeMessage() {
        let message = 'Hello, Parent'
        this.triggerEvent('messageChange', { value: message })
      }
    }
  })

  
  

三、 跨级组件间传值

在应用程序的开发过程中，可能会遇到需要在多个级别的组件之间传递数据的情况。这时候可以使用bus（事件总线）的方式来解决问题。

  // bus.js
  import { EventEmitter } from 'events'
  const bus = new EventEmitter()
  export default bus

  // 父组件 index.js
  import bus from '../../utils/bus.js'

  Page({
    handleMessageChange(e) {
      let value = e.detail.value
      bus.emit('messageChange', value)
    }
  })

  // 子组件 child.js
  import bus from '../../utils/bus.js'

  Component({
    data: {
      message: ''
    },
    onLoad() {
      bus.on('messageChange', this.handleMessageChange.bind(this))
    },
    handleMessageChange(value) {
      this.setData({ message: value })
    }
  })

四、 使用Behavior提取公共逻辑

在微信小程序的开发中，可能会出现多个组件需要实现同样功能，例如：组件中的操作需要获取同一个数据源。针对这种情况，需要提取相同的逻辑，并使用Behavior封装成一个mixin。这样就可以在多个组件中调用该mixin，并实现复用。

  // data-mixin.js

  export default {
    data: {
      message: ''
    },
    setMessage(value) {
      this.setData({ message: value })
    }
  }

  // component-a.js

  import DataMixin from '../../mixin/data-mixin.js'

  Component({
    behaviors: [DataMixin],
  })

  // component-b.js

  import DataMixin from '../../mixin/data-mixin.js'

  Component({
    behaviors: [DataMixin],
  })

五、 总结

本文从多个方面详细阐述了微信小程序子组件向父组件传值的方法。实践中可以根据实际需求选择不同的方法。