Fram/Lib

VUE组件间的几种通信方式

字数:3042    阅读时间:16min
阅读量:8778

父子通信

一、props与$emit();父传子,子传父

1、props:父组件向子组件传递数据;在父组件中调用子组件的时候通过v-bind将需要传递的数据绑定给一个属性,然后再在子组件的props里接收这个属性,这样就完成了父向子传递信息;注意props是单向数据流,不建议子组件直接修改,如果要修改最好还是子组件通过$emit()来触发父组件的一个事件来让父组件修改这个值,(注意如果直接修改props里的基本数据类型的值浏览器是会警告的,但是修改的数据是Object或者Array的时候是不会发出警告的,并且可以做到响应式,因为修改对象时并没有直接修改这个引用,而是修改的引用指向的地址的值,所以不会警告并能做到响应式)

2、$emit():子组件向父组件传递数据;子组件通过提交有数据参数的事件,父组件检测事件触发一个接收数据的方法的方式进行子组件向父组件的传值,

二、$parent与$children;获取父级组件或子级组件的值

在当前组件下我们可以通过$parent来获取父级组件实例(如果有);同样的也可以通过$children来获取子组件的实例(如果有),有了实例就可以通过属性或方法访问上边的数据了;注意他们俩只是作为应急方案使用,最好还是使用props和$emit()

三、ref和refs;获取子组件的值

与$parent和$children一样都是拿到想要获得数据的实例对象,再获取数据;ref如果在普通Dom上引用指向的就是这个元素,当ref在一个vue组件上,引用就指向这个组件实例;在VUE中可以使用ref来获取当前的真是Dom元素

跨级通信

四、provide和inject;隔代组件获取根组件的值

在需要向隔代组件传递信息的时候我们除了能使用全局通信外就是使用props一级一级的往下传,但是这样太麻烦又不利于后期维护,于是VUE又提供了一对provide/inject来将数据传递给隔代组件;大概就是在父级组件将需要传递的数据放在provide里(类似data,父组件访问自己的provide通过this._provided),然后在子级或者隔代组件中通过inject来注入这个数据(类似props),就可以在自己或者隔代组件里使用这个数据了;注意这里边的数据不是响应式的;一般会用provide/inject来开发组件减少组件的耦合度(有点高深,以后再了解)

关于数据响应官方的说法是: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。 但是如果我们使用provide/inject传递信息的话往往还是需要数据响应的,那么该如何是好呢,这里介绍一种父级数据改变子级或者隔代inject数据也改变的方法;在我们父级provide数据中我们返回一个包含实例this的数据函数,这样我们在子级或者隔代组件中调用函数的时候都是调用当前实例下的这个属性,父组件的这一属性一发生改变,隔代调用的这个数据也会发生改变,这就做到了响应式

五、$attrs和$listeners;跨级通信

$attrs: 官方介绍是包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用 ;也就是说通过$attrs可以获取除了class,style属性以及传递给prop的属性外的实例的所有属性(注意需要通过v-bind绑定在属性上,组件才能获取到);

$listeners:官方介绍是 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用 ;也就是说通过$listeners可以获取父组件的除了.native外的所有绑定的事件

全能通信

六、EventBus事件总线

EventBus :事件总线;在组件间作为沟通桥梁的作用,就像是所有组件共用相同的事件中心,可以向该事件中心注册发送事件也可以接收事件,所以组件间都可以互相通知其他组件数据的改变;但是使用这种方式,这个组件一个$emit那个组件一个$on,数据多了就容易造成混乱,很难进行维护,所以在大型的需要共享数据较多的项目中还是使用VUEX比较好。

事件总线其实就是一个没有DOM只有方法的组件;我们可以在全局注册这个组件,然后就可以在各个组件使用它了;注册完之后的全局事件总线有三个事件方法:$emit()提交修改数据事件,$on()获取数据事件,$off()移除事件监听;注意$on监听事件要定义在$emit提交事件之前

七、VUEX状态管理

Vuex采用的是集中式存储,管理应用的所有组件的状态,在相应的规则下可以保证状态以一种可预测的方式发生变化 ;它实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过commit()提交到Mutation进行修改,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。所有异步操作需要通过dispath()提交到Action再由Action通过commit()提交到Mutation里进行修改;Vuex一般用于较大的较复杂的项目,可以很好的进行状态追踪和维护 ;Vuex有五大核心属性 State(存储数据)、getter(筛选处理数据)、Mutation(处理改变数据的事件,只能处理同步事件)、Action(处理异步改变数据的事件)、Moulde(类似命名空间)。了解详情请移步

八、localStorage、sessionStorage缓存

通过缓存的方式来进行组件间的数据通信是比较简单的,就是通过 window.localStorage.setItem(key,value) 设置数据名和值,在需要的地方再通过 window.localStorage.getItem(key)来获取需要的数据。但是需要缓存的数据和状态多了就容易造成混乱不易维护,而且缓存多了,对用户体验来讲并不是很友好

九、$dispatch 和 $broadcast

$dispatch$broadcast 是一对情侣 属性,在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流,以实现嵌套父子组件的通信。但是由于其显功能缺陷,在 Vue 2.0 中就被移除了,但是有很多vue的框架如 element-ui、iview 都对其进行了封装。如果想要了解可以自行搜索,这里提供一个站外链接可供参考

野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

发表评论

邮箱地址不会被公开。

相关推荐