前言

今天我们来说下vue组件间的通信方式

内容

1. 组件通信方式大体有以下8种：
props
$emit/$on
$children/$parent
$attrs/$listeners
ref
$root
eventbus
vuex
根据组件之间关系大概应用如下
1. 父子组件
props
$emit/$on
$parent / $children
ref
$attrs / $listeners
2. 兄弟组件
$parent
eventbus
vuex
3. 跨层级关系
provide/inject
$root
eventbus
vuex


父组件向子组件传值

1.1 props方式：可以是数组或对象，用于接收父组件的数据

1.2 通过$parent获取父组件实例的方法或者属性

这种方式，从严格意义上讲不是值的传递，而是一种“取”(不推荐直接通过实例进行值的获取)

使用：

实例属性$pareng可以获得父组件的实例，借助实例可以调用父实例中的方法，或者父实例上的属性

1.3 使用修饰符 .sync

修饰符 .sync 是 2.3.0+ 新增，它对 props 起到了一种修饰的作用，使用 .sync 进行修饰的 props 意味子组件有修改它的意图，这种情况下它只起到一个标注性作用，有它没它都不会影响逻辑

使用 .sync 修改上边的代码：

// 父组件 List.vue

// 子组件 ListItem.vue



使用.sync 向子组件传递 多个props：

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 `v-on 监听器。

子组件向父组件传值

2.1 通过事件传值$emit

使用：

子组件使用$emit发送一个自定义事件

父组件使用指令v-on监听子组件发送的事件

2.2通过$children获取子组件实例

同$parent

2.3 通过ref注册子组件引用

虽然存在prop和事件，但是有时仍可能需要在Javascript里直接访问一个子组件。为了实现这样的需求，可以使用ref特性为某个子组件设置一个ID引用，就是一个身份标识

兄弟组件传值

3.1 Bus中央事件总线

非父子组件传值，可以使用一个空的Vue实力作为中央事件总线，结合实例方法$on,$emit使用

注意：

注册的Bus要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况。

beforeDestroy(){
this.$Bus.$off('方法名',value);
}


Bus定义方式：

1. 将Bus抽离出来，组件有需要时引入

// bus.js
import Vue from 'vue';
const Bus = new Vue();
export default Bus;


2. 将Bus挂载到Vue根实例的原型上

import Vue from 'vue';
Vue.prototype.$bus = new Vue();


3. 将bus注入到Vue根对象上

import Vue form 'vue';
const Bus = new Vue();
new Vue({
el:'#app',
data:{
Bus
}
})


使用例子：

跨组件

4.1 $attrs 和 $listeners

如果父组件A下面有子组件B，组件B下面有组件C，这时如果组件A直接想传递数据给组件C那就行不通了！所以这时可以使用 $attrs 和 $listeners

Vue 2.4 提供了 $attrs 和 $listeners 来实现能够直接让组件A传递消息给组件C。

// 组件A
Vue.component('A', {
template: `