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在组件之间的通信告一段落
