组件通信补充 | Vue

常用通信方式
props $emit/$on event bus vuex

  - event bus
      > 事件总线
      > main.js
      ```javascript
      class Bus {
          constructor() {
              this.callbacks = {}
          }
          $on(name, fn) {
              this.callbacks[name] = this.callbacks[name] || []
              this.callbacks[name].push(fn)
          }
          $emit(name, args) {
              if (this.callbacks[name]) {
                  this.callbacks[name].forEach(cb => cb(args))
              }
          }
      }
      Vue.prototype.$bus = new Bus() // 也可以直接用Vue来代替Bus
      ```

      > 两个子组件的通信
      > child1.vue
      ```html
      <script>
      ...
      methods: {
          handle: function() {
              // 触发的事件方法
          }
      },
      mounted() {
          this.$bus.$on('foo', this.handle)
      }
      ...
      </script>
      ```
      > child2.vue
      ```html
      <script>
          ...
          this.$bus.$emit('foo')
          ...
      </script>
      ```

• 边界情况

  $parent
  $children
  $root // 以上不推荐使用，避免高耦合
  $refs
  provide/inject
  非Prop特性
      $attrs
      $listeners
  

  • $parent/$root

    事件的派发与监听可以是共同的父组件或者根组件

    // 使用$parents代替上面的$bus
    this.$parent.$on('foo', this.handle)
    
    this.$parent.$emit('foo')
    

  • $children

    调用自定义组件
    不能保证子元素的顺序，比如异步组件的存在时

    <script>
        ...
        this.$children[1].handle()
        ...
    </script>            
    

  • $refs

    调用自定义组件与普通dom元素

    <script>
        ...
        this.$refs.child.handle()
        ...
    </script>            
    

  • $attrs/$listeners

    没有props声明， 非props特性
    child1.vue

    <template>
        <child1 msg="信息"></child1>
    </template>
    

    parent.vue

    <template>
        <p>{{ $attrs.msg }}</p>
    </template>
    
    <script>
        // 没有props声明
    </script>
    

    • 参数一代代组件传递下去

      grandpa.vue

      <template>
          <parent msg="信息"></parent>
      </template>
      

      parent.vue

      <template>
          <!-- 属性按键值对的方式直接展开 -->
          <child1 v-bind="$attrs"></child1>
      </template>
      

      child1.vue

      <template>
          <div>
              <p>{{ $attrs.msg }}</p>
          </div>
      </template>
      

    • 事件的隔代转发

      grandpa.vue

      <template>
          <parent msg="信息" @foo="onFoo"></parent>
      </template>
      <script>
          ...
          methods: {
              onFoo() {
                  console.log('msg from child1');
              }
          }
          ...
      </script>
      

      parent.vue

      <template>
          <!-- 属性按键值对的方式直接展开 -->
          <child1 v-bind="$attrs" v-on="$listeners"></child1>
      </template>
      

      child1.vue

      <template>
          <script>
              ...
              this.$emit('foo')
              ...
          </script>
      </template>
      

  • provide/inject

    层级超过2层，直接从爷爷传到孙子辈
    跨层传参
    grandpa.vue

    <script>
        export default {
            provide() {
                return {
                    'bar': 123
                }
            }
        }
    </script>
    

    son.vue

    <template>
        <div>
            <p>{{ bar1 }}</p>
        </div>
    </template>
    <script>
        export default {
            // inject: ['bar'], // 类似于props
            // 1.避免重名，起别名
            inject: {
                bar1: 'bar'
            }
            // 2.设置默认值
            // inject: {
            //     bar1: {
            //         from: 'bar',
            //         default: '000',
            //     }
            // }
        }
    </script>