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简洁版

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

1. 父子通信

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

2. 兄弟通信 ，同级组件

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

3. 跨级通信

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

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