vue组件通信 父传子 子传父 同级组件 跨级通信 vuex（二）

续上篇 vue组件通信 父传子 子传父 同级组件 跨级通信 vuex（一）

props和$emit(常用)$ attrs和$ listeners（跨级通信）$ parent和$ children（非常简洁）ref（获取子组件所有属性，事件等v-model （特殊情景使用）provide和inject （成对出现，用于父向下传递数据）中央事件总线（同级组件通信）v-slot（插槽传值，灵活运用）vuex （集中的数据处理方式）

方法六 provide和inject （成对出现，用于父向下传递数据）

这两货需要一起使用，允许一个祖先组件向其子子孙孙注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

文字那么多，基本用法，简单到令人发指

补充： vue官方文档

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的

简言之，就是祖先值改变了，子子孙孙还是最先传过来的那个值

但是，想实现数据响应式也是可以的

1，直接提供 祖先组件 的实例 2，Vue.observable 优化响应式 两种方法效果图一样：

方法七 bus中央事件总线（同级组件通信）

把bus定义在vue的prototype上，在全局都可以使用 main.js 中挂载实例 const bus = new Vue() Vue.prototype.$bus = bus this.$ bus.$emit发送事件this.$ bus.$on接收事件

方法八 v-slot（插槽传值，灵活运用）

单独做一章节 附上传送门 v-slot用法总结

方法九 vuex （集中的数据处理方式）

知识点可能较多 单独做一章节讲解 vuex简洁版

总结 常见使用场景可以分为三类

父子通信

父向子传递数据是通过 props，子向父是通过 events（$ emit）； 异常简洁的（$ parent / $ children）； ref 也可以访问组件实例，父组件通过this.$ refs可以获取子组件所有事件属性； provide / inject API； $ attrs/$ listeners； v-slot 这个不要局限于父子传值，更多在于场景的运用

兄弟通信 ，同级组件

Bus 同级之间，直接在需要的组件发$ meit,在需要接收的地方用$ on接收 ； Vuex 这个不多介绍，Vue灵魂成员之一；

跨级通信

Bus； Vuex； provide / inject 这个是Vue2.2.0新增API,需要一起使用 $ attrs/$ listeners 仅是传递数据,使用起来很顺手

自此，对于vue在组件之间的通信告一段落