Vue 组件通信方式

最新推荐文章于 2024-07-19 18:41:59 发布

2401_84150046

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量812

点赞数 12

分类专栏：程序员文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_84150046/article/details/138503092

版权

程序员专栏收录该内容

196 篇文章 0 订阅

订阅专栏

本文介绍了Vue中如何使用$attrs接收非prop属性，$listeners处理事件监听，以及provide/inject和eventBus/Vuex进行组件间的高效通信和状态管理。实例演示了如何在多层次组件间传递数据和事件，以及Vuex在大型项目中的状态控制作用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

$attrs / $listener

================================================================================

$attrs：用来接收父作用域中不作为 prop 被识别的 attribute 属性，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

当你创建了一个组件，你要接收 param1 、param2、param3 …… 等数十个参数，如果通过 props，那你需要通过props: [‘param1’, ‘param2’, ‘param3’, ……]等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递，那将会更加麻烦。

而使用 $attrs ，你不需要任何声明，直接通过 $attrs.param1、 $attrs.param2……就可以使用，而且向深层子组件传递上面也给了示例，十分方便。

$listeners： 包含了父作用域中的 v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建更高层次的组件时非常有用，这里在传递时的使用方法和 $attrs 十分类似。

实例

在实例中，共有三个组件：A、B、C，其关系为：[ A [ B [C] ] ]，A为B的父组件，B为C的父组件。即：1级组件A，2级组件B，3级组件C。我们实现了：

父向子传值：1级组件A通过:messageFromA="message"将 message 属性传递给2级组件B，2级组件B通过 $attrs.messageFromA获取到1级组件A的 message 。
跨级向下传值：1级组件A通过:messageFromA=“message"将 message 属性传递给2级组件B，2级组件B再通过v-bind=”$attrs"将其传递给3级组件C，3级组件C通过 $attrs.messageFromA获取到1级组件A的 message 。
子向父传值：1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过v-on=”$listeners"来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时，便会触发1级组件A的receive回调，将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现子向父传值。
跨级向上传值：1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过<CompC v-on="$listeners" />将其继续传递给C。3级组件C在通过v-on=”$listeners"来将 keyup 事件绑定在其 input 标签上。当3级组件C input 输入框输入时，便会触发1级组件A的receive回调，将3级组件C的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现跨级向上传值。

// 3级组件C

this is C component

收到来自A组件的消息：{{ $attrs.messageFromA }}

// 2级组件B

this is B component

收到来自A组件的消息：{{ $attrs.messageFromA }}

// A组件

this is A component

收到来自{{ comp }}的消息：{{ messageFromComp }}

在这里插入图片描述

provide/inject

============================================================================

provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你是熟悉React的同学，你一定会立刻想到Context这个api，二者是十分相似的。

provide： 是一个对象，或者是一个返回对象的函数。该对象包含可注入其子孙的 property ，即要传递给子孙的属性和属性值。

injcet： 一个字符串数组，或者是一个对象。当其为字符串数组时，使用方式和props十分相似，只不过接收的属性由data变成了provide中的属性。当其为对象时，也和props类似，可以通过配置default和from等属性来设置默认值，在子组件中使用新的命名属性等。

实例

这个实例中有三个组件，1级组件A，2级组件B，3级组件C：[ A [ B [C] ] ]，A是B的父组件，B是C的父组件。实例中实现了：

父向子传值：1级组件A通过provide将message注入给子孙组件，2级组件B通过inject: [‘messageFromA’]来接收1级组件A中的message，并通过messageFromA.content获取1级组件A中message的content属性值。
跨级向下传值：1级组件A通过provide将message注入给子孙组件，3级组件C通过inject: [‘messageFromA’]来接收1级组件A中的message，并通过messageFromA.content获取1级组件A中message的content属性值，实现跨级向下传值。

// 1级组件A

this is A component

// 2级组件B

this is B component

收到来自A组件的消息：{{ messageFromA && messageFromA.content }}

// 3级组件C

this is C component

收到来自A组件的消息：{{ messageFromA && messageFromA.content }}

注意点：

可能有同学想问我上面1级组件A中的message为什么要用object类型而不是string类型，因为在vue provide 和 inject 绑定并不是可响应的。如果message是string类型，在1级组件A中通过input输入框改变message值后无法再赋值给messageFromA，如果是object类型，当对象属性值改变后，messageFromA里面的属性值还是可以随之改变的，子孙组件inject接收到的对象属性值也可以相应变化。

子孙provide和祖先同样的属性，会在后代中覆盖祖先的provide值。例如2级组件B中也通过provide向3级组件C中注入一个messageFromA的值，则3级组件C中的messageFromA会优先接收2级组件B注入的值而不是1级组件A。

![在这里插入图片描述](https://img-blog.csdnimg.cn/543aac6d138a4fe1ac8f49f156ea2cc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2K55Sf6L-H5b6A,size_16,color_FFFFFF,t_70,g_se,x_16)

eventBus

======================================================================

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

我们可以通过在全局Vue实例上注册:

// main.js

Vue.prototype.$Bus = new Vue()

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

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

import Vue from ‘vue’

export const Bus = new Vue()

原理分析

eventBus的原理其实比较简单，就是使用订阅-发布模式，实现 e m i t 和 emit和 emit和on两个方法即可：

// eventBus原理

export default class Bus {

constructor() {

this.callbacks = {}

}

$on(event, fn) {

this.callbacks[event] = this.callbacks[event] || []

this.callbacks[event].push(fn)

}

$emit(event, args) {

this.callbacks[event].forEach((fn) => {

fn(args)

})

}

// 在main.js中引入以下

// Vue.prototype.$bus = new Bus()

实例

在这个实例中，共包含了4个组件:[ A [ B [ C、D ] ] ]，1级组件A，2级组件B，3级组件C和3级组件D。我们通过使用eventBus实现了：

全局通信：即包括了父子组件相互通信、兄弟组件相互通信、跨级组件相互通信。4个组件的操作逻辑相同，都是在input输入框时，通过this.$bus.$emit('sendMessage', obj)触发sendMessage事件回调，将sender和message封装成对象作为参数传入；同时通过this.$bus.$on('sendMessage', obj)监听其他组件的sendMessage事件，实例当前组件示例sender和message的值。这样任一组件input输入框值改变时，其他组件都能接收到相应的信息，实现全局通信。

// main.js

Vue.prototype.$bus = new Vue()

// 1级组件A

this is CompA

收到{{ sender }}的消息：{{ messageFromBus }}

// 2级组件B

this is CompB

收到{{ sender }}的消息：{{ messageFromBus }}

// 3级组件C

this is CompC

收到{{ sender }}的消息：{{ messageFromBus }}

// 3级组件D

this is CompD

收到{{ sender }}的消息：{{ messageFromBus }}

在这里插入图片描述

Vuex

==================================================================

【vuex官网】

当项目庞大以后，在多人维护同一个项目时，如果使用事件总线进行全局通信，容易让全局的变量的变化难以预测。于是有了Vuex的诞生。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

实例

Vuex的实例和事件总线leisi，同样是包含了4个组件:[ A [ B [ C、D ] ] ]，1级组件A，2级组件B，3级组件C和3级组件D。我们在这个实例中实现了：

全局通信：代码的内容和eventBus也类似，不过要比eventBus使用方便很多。每个组件通过watch监听input输入框的变化，把input的值通过vuex的commit触发mutations，从而改变stroe的值。然后每个组件都通过computed动态获取store中的数据，从而实现全局通信。

// store.js

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({

state: {

message: {

sender: ‘’,

content: ‘’,

mutations: {

sendMessage(state, obj) {

state.message = {