左小白的技术日常
Github
2020/08/15
Author: guoqzuo

vue组件之间传值(通信)方式总结

在vue中一般组件之间传值是必须要理解的,下面来总结下组件间传值的方法,分为以下几种情况

  1. 父组件 => 子组件
  2. 子组件 => 父组件
  3. 兄弟组件
  4. 父组件 => 子组件
  5. 祖先和后代之间
  6. 任意两个组件之间

父组件 => 子组件

子组件 => 父组件

// child
this.$emit('add', 'val')

// parent
<hello-word @add="cartAdd($event)" />

兄弟组件

通过共同的祖辈组件($parent$root) 利用vue内置的发布订阅模式功能

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

祖先和后代之间

provide / inject 祖先给后代传值

// 祖先组件
provide() {
    return { foo: 'foo'}  // 要像data一样,用函数包裹
}

// 后代组件
inject: ['foo']

dispatch:后代给祖先传值

function dispatch(eventName, data) {
    let parent = this.$parent
    // 只要还存在父元素就继续往上找
    while (parent) {
        // 父元素用$emit触发
        parent.$emit(eventName, data)
        // 继续传给上一层父元素
        parent = parent.$parent
    }
}

任意两个组件之间:事件总线(Bus)或vuex

// vue组件自身实现了发布订阅模式
// Bus.js
export default new Vue()

// A组件
import Bus from 'Bus'
Bus.$on('foo', handle)
// B组件
import Bus from 'Bus'
Bus.$emit('foo', 'val')