Vue组件间通信的6种方式

1. props/$emit 父子组件通信

子组件通过 props接收父级传递的参数，通过$emit触发父级方法，传递参数

子组件：
<input type="text" :value="title">
<button @click="addList">添加</button>
...
props: ['title'],

...
addList () {
      this.$emit('add', this.title);
...
}

父级通过 在子组件上 @方法名 监听事件

父组件：
<Input @add="addHandler" />

addHandler (title) {
    console.log(title); // 子组件传递的值
}

2. 使用ref 和 $parent / $children 父子组件通信

父组件取子组件的值
1. 使用$children

this.title = this.$children[0].title;

2. 使用$ref获取指定子组件的值

<Input ref="childInput" />

this.title = this.$refs.childInput.title;

子组件取父组件的值

// 子组件中
this.msg = this.$parent.msg;

3.使用EventBus  兄弟组件通信

其实event就是个空的vue实例，使用event.$on监听自定义事件，evevt.$emit触发，event.$off解除绑定

event.js

import Vue from 'vue';

export default new Vue();

兄弟1-传值方

import event from '../../utils/event.js'

// 兄弟组件通信，触发自定义事件
event.$emit('logTitle', this.title);

兄弟2-接收值方

import event from '../../utils/event.js'

// 绑定自定义事件
event.$on('logTitle', this.consoleTitle);
...
consoleTitle(title) {
      console.log('兄弟组件间通信', title);
}
...

beforeDestroy() {
      // 注意销毁周期解绑自定义事件
      event.$off('logTitle', this.consoleTitle);
}

4.$attrs / $listeners 适用于 隔代组件通信

 

$attrs：包含了父作用域中不被prop所识别（且获取）的特性绑定（class 和 style 除外）。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用

$listeners：包含了父作用域中的（不含.native 修饰器的）v-on 事件监听器，它可以通过 v-on="$listeners" 传入内部组件

 

5.provide ／ inject 适用于 隔代组件通信

祖先组件通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量，provide ／ inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件之间建立了一种主动提供与依赖注入的关系

父组件中：

// 父组件
provide() {
    return {foo: 'foo'}
}
...
data() {

}

子组件中：

inject: ['foo'],
...
data() {
}

 

6. Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是专为Vue.js应用程序开发的状态管理模式

关于vuex使用，详见 vuex 使用详解