Vue组件通信方式居然有这么多?你了解几种

1. props/$emit

props和$emit相信大家十分的熟悉了,这是我们最常用的vue通信方式。
props
props可以是数组或对象,用于接收来自父组件通过v-bind传递的数据。当props为数组时,直接接收父组件传递的属性;当 props 为对象时,可以通过typedefaultrequiredvalidator等配置来设置属性的类型、默认值、是否必传和校验规则。
$emit
在父子组件通信时,我们通常会使用$emit来触发父组件v-on在子组件上绑定相应事件的监听。

2. v-slot

v-slot是 Vue2.6 版本中新增的用于统一实现插槽和具名插槽的api,用于替代slot(2.6.0废弃)slot-scope(2.6.0废弃)scope(2.5.0废弃)api
v-slot
template 标签中用于提供具名插槽或需要接收 prop 的插槽,如果不指定 v-slot ,则取默认值 default

3. $refs/$parent/$children/$root

我们也同样可以通过 $refs/$parent/$children/$root 等方式获取 Vue 组件实例,得到实例上绑定的属性及方法等,来实现组件之间的通信。
$refs
我们通常会将 $refs 绑定在DOM元素上,来获取DOM元素的 attributes。在实现组件通信上,我们也可以将 $refs 绑定在子组件上,从而获取子组件实例。
$parent
我们可以在 Vue 中直接通过this.$parent来获取当前组件的父组件实例(如果有的话)。
$children
同理,我们也可以在 Vue 中直接通过this.$children来获取当前组件的子组件实例的数组。但是需要注意的是,this.$children数组中的元素下标并不一定对用父组件引用的子组件的顺序,例如有异步加载的子组件,可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
$root
获取当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。通过 $root ,我们可以实现组件之间的跨级通信。

4. $attrs/$listener

$attrs 和 $listeners 都是 Vue2.4 中新增加的属性,主要是用来供使用者用来开发高级组件的。

$attrs用来接收父作用域中不作为 prop 被识别的 attribute 属性,并且可以通过v-bind=”$attrs”传入内部组件——在创建高级别的组件时非常有用。
试想一下,当你创建了一个组件,你要接收 param1 param2param3 …… 等数十个参数,如果通过 props,那你需要通过props: [‘param1’, ‘param2’, ‘param3’, ……]等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递,那将会更加麻烦。
而使用 $attrs ,你不需要任何声明,直接通过$attrs.param1$attrs.param2……就可以使用,而且向深层子组件传递上面也给了示例,十分方便。

$listeners包含了父作用域中的 v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用,这里

5. provide/inject

provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你是熟悉React的同学,你一定会立刻想到Context这个api,二者是十分相似的。
provide
是一个对象,或者是一个返回对象的函数。该对象包含可注入其子孙的 property ,即要传递给子孙的属性和属性值。
injcet
一个字符串数组,或者是一个对象。当其为字符串数组时,使用方式和props十分相似,只不过接收的属性由data变成了provide中的属性。当其为对象时,也和props类似,可以通过配置defaultfrom等属性来设置默认值,在子组件中使用新的命名属性等。

6. eventBus

eventBus又称事件总线,通过注册一个新的Vue实例,通过调用这个实例的$emit$on等来监听和触发这个实例的事件,通过传入参数从而实现组件的全局通信。它是一个不具备 DOM 的组件,有的仅仅只是它实例方法而已,因此非常的轻便。
我们可以通过在全局Vue实例上注册:

// main.js

Vue.prototype.$Bus = new Vue()

但是当项目过大时,我们最好将事件总线抽象为单个文件,将其导入到需要使用的每个组件文件中。这样,它不会污染全局命名空间:

// bus.js,使用时通过import引入

import Vue from ‘vue’

export const Bus = new Vue()

7. Vuex

当项目庞大以后,在多人维护同一个项目时,如果使用事件总线进行全局通信,容易让全局的变量的变化难以预测。于是有了Vuex的诞生。
Vuex
是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
有关Vuex的内容,可以参考Vuex官方文档,我就不在这里班门弄斧了,直接看代码。

JavaScript常用必备知识点
« 上一篇 2020年10月28日 上午12:00
js系经典测试题,v-show和v-if的区别是啥?
下一篇 » 2020年10月28日 上午12:00