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