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 使用详解