Vue通信的几种方式

Posted 2023-02-25

参考技术A 组件之间通信, 主要存在于下面三种情况:

那么具体他们之间如何进行通信, 我们一一解答

首先先看下文件的目录结构

接下来看看具体的通信方式

现在我们要从 Index 页面给 A 页面传递一个数组 list

效果图如下, 此时 list 数组以自上而下的一种方式从 Index 页面传递给 A 组件, 且 props 只可以从上一级想下一级传输, 即所谓的单向数据流

那 A 组件想给 Index 页面传送数据应该如何操作? 关于子组件给父组件传值, 一般都是通过一个事件搭配 $emit 进行传输

父组件监听子组件上的事件名 on-item-click

此时, 点击 li 元素的时候, 我们就可以在 Index 页面获取到 A 页面传递过来的值

因为这两个API拿到的都是vue实例, 所以可以访问父组件或子组件身上变量, 方法等; 使用方式如下:

在 A 页面中定义了一个变量 msg , 通过 $parent 获取父组件中的数据

现在我们在父组件中通过 $children 获取到 A 页面中的 msg 并修改

ref 如果用在普通的DOM元素上, 引用指向的就是DOM元素本身; 如果使用在组件上, 引用指向的就是该组件的实例

下面是打印的结果

这对选项需要一起使用, 允许一个祖先组件向所有后代注入一个依赖, 不论层级有多深, 并在其上下游关系成立的时间里始终生效

我们现在来看一下具体的例子: Index -> A -> C

先在 Index 中提供数据

然后在 C 组件中通过 inject 获取值

这种方式是通过创建一个空的 Vue 实例作为事件总线, 用它来触发事件, 监听事件, 解除事件, 从而实现任何组件之间的通信, 然后当项目逐渐扩大, 这种通信方式还是不建议选择, 难以维护

使用 EventBus 来通信主要有以下几个步骤

主要有 Index、A、B、C 几个页面

我们先通过 Index 页面向 B 组件传递 name, sex, age 三个值

然后再 B 组件中我们打印一下 $attrs , 看看能获取什么值? 可以看见 $attrs 返回的是一个对象, 且键值对就是我们在 Index 页面传给 B 组件的值

如果此时我们在 B 组件的 props 中接收一个变量, 看看有何变化? 打印出来的值不包含 props 获取的 name 字段

现在需要把这几个变量再继续传给 B 组件的子组件 D , 我们直接通过 v-bind="$attrs" 即可

D 组件同样获取到了这几个值

当子组件需要调用父组件中的方法, 我们就可以通过 $listeners 来调用, 但前提是方法名必须在父组件中被定义

我们实操一下, 先在 Index 页面的分别定义两个事件

子组件 B 调用方法如下, 现在我们分别点击 one , two 两个文本就可以分别打印出 1 , 2

如果再向下传递给 B 的子组件 D 也是没有问题的, 我们只需要将 $listeners 传下就可以了

D 组件也像 B 组件那样调用事件即可

Vuex 想必大家应该很熟悉, 它是一个专为 Vue.js 应用程序开发的状态管理模式, 它让开发者能够聚焦于数据的更新而不是数据的传递

Vuex 主要有以下几个模块

我们现在就开头说的三种场景再进行一次总结, 但是我们还是需要根据当下的场景选择合适的通信方式~