Vue 组件通信方式

Vue 组件通信方式

• 通信的类型
  • 父子组件通信
  • 兄弟组件通信
  • 祖孙、后代通信
  • 非关系组件的通信
• 通信的方式（8种）
  1. props
  2. $emit
  3. ref
  4. EventBus
  5. parent root
  6. attrs listeners
  7. provide inject
  8. vuex 等状态管理库

• 详细描述

  • props 通信：父向子传递数据

  • $emit 通信：子组件触发父组件

    // 子组件
    this.$emit('add', {data: 123})
    // 父组件
    <Children @add="handleAdd($event)" />

  • ref 通信：

    // 父组件中
    <Children ref='foo' />
    this.$refs.foo // 这样就可以调用子组件的实例

  • EventBus：兄弟组件传值，总线机制

    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 绑定 bus
    Vue.prototype.$bus = new Bus()
    
    // 如何使用
    // 在一个组件中，触发事件
    this.$bus.$emit('foo')
    // 在另一个组件中，监听事件，并触发自身的处理函数
    this.$bus.$on('foo', this.handle)

  • parent root 通信：适用于有共同祖先的组件

    // 比如两个兄弟组件中的组件A1
    this.$parent.on('add', this.add)
    // 另一个组件 A2 中去触发这个方法
    this.$parent.emit('add')

  • attrs listeners 通信：祖先传递给子孙

    // child 中调用祖先的 foo
    <p> {{ $attrs.foo }} </p>
    
    // 如何传递
    <Child foo='foo' />
    <Child2 msg='hello' @some-event='onSomeEvent' />
    
    <Grandson v-bind="$attrs" v-on="$listeners" />
    
    <div @click="$emit('some-event', 'msg from grandson')" />

  • provide inject 通信

    // 在祖先组件中
    provide() {
      return {
        foo: 'foo'
      }
    }
    
    // 在子孙组件中调用
    inject: ['foo']

  • 其他：vuex 状态管理，适合组件之间更加复杂的数据传输