微信小程序父子组件、兄弟组件通信的封装

基础支持

1. 父组件获得子组件实例对象

this.selectComponent(selector)
this.selectAllComponents(selector)

2. 子组件触发父组件

this.triggerEvent()

封装实现

新建bus.js文件

module.exports = Behavior({
    
    
  methods: {
    
    
    _onBusRelations(e) {
    
    
      e.detail = e.detail || {
    
    }
      let options = {
    
    
        selector: '', //直接拼装好的选择器 如：'#id1,.class1,id2,class2'
        id: '', //id选择器
        class: '', //类选择器
        name: '', //需要调用的 组件的内部方法名称
        params: {
    
    }, //传递的参数
        ...e.detail
      }
      if (options.selector) {
    
    

      } else if (options.id) {
    
    
        options.selector = `#${
      
      options.id}`
      } else if (options.class) {
    
    
        options.selector = `.${
      
      options.class}`
      } else {
    
    
        console.error('未获取到子节点')
      }
      try {
    
    
        this.selectAllComponents(options.selector).forEach((item) => {
    
    
          new Promise(resolve => {
    
     //使用异步的方式，如果有多个子组件，不用等待调用方法的运行完成
            item[options.name](options.params)
          })
        })
      } catch (e) {
    
    
        console.log(e);
      }
    }
  }
})

使用方法

触发自定义组件custom-button内的clearInput方法，所有的custom-input都相应此事件
新建n个自定义组件，在页面json中引用组件,在页面wxml中使用组件, 在页面js文件中引用bus.js

//custom-buttom 内触发clearInput方法，会响应到页面的 bind:bus="_onBusRelations"
clearInput() {
    
    
      this.triggerEvent('bus', {
    
    
        name: 'clearInput',
        class: 'custom-input'
        // id: 'customInput'
      }, {
    
    
        bubbles: true,
        composed: false
      })
    }

// custom-input 内相应对应的方法
clearInput() {
    
    
     console.log('响应清除');
    }

效果