Vue 组件通信指南：Props 和 $emit，Vuex（状态管理），EventBus（事件总线），Provide/Inject（依赖注入）

server/2024/11/14 23:15:28/

Snipaste_2023-10-14_13-39-18.png

引言

在 Vue 中，组件是构建应用的基本单元，而组件通信则是构建复杂应用的关键。组件通信是指在不同的 Vue 组件之间传递数据、交互和共享状态的过程，它在构建大型应用和组织代码方面起着至关重要的作用。

在开发过程中，我们经常会遇到父子组件的通信、兄弟组件之间的数据传递、跨级组件之间的通信等场景。为了解决这些问题，Vue 提供了多种方式来实现组件通信，如 Props 和 $emit、事件总线、Vuex 状态管理等。每种方式都有其独特的优势和适用场景。

本篇文章将详细介绍 Vue 组件通信的各种方式，包括父子组件通信、兄弟组件通信、跨级组件通信和非父子组件通信。让我们深入研究 Vue 组件通信，提升我们在 Vue 应用开发中的技能和效率。

一. 父子组件通信

父组件向子组件传递数据

Props 属性传递

当我们需要在父组件中向子组件传递数据时，Vue 提供了一种非常方便的方式，那就是通过 Props 属性传递。下面进行具体的代码示例：

父组件：

<template><div><h1>父组件</h1><ChildComponent :message="message" /></div>
</template><script>
import ChildComponent from "./ChildComponent.vue";export default {components: {ChildComponent,},data() {return {message: "Hello, Child!",};},
};
</script>

子组件：

<template><div><h2>子组件</h2><p>{{ message }}</p></div>
</template><script>
export default {props: {message: {type: String,required: true,},},
};
</script>

在父组件中，我们通过给子组件的属性绑定一对:，并将需要传递的数据绑定到属性上。在这个例子中，我们将message属性绑定到了子组件的message属性上。

在子组件中，我们使用props选项来声明接受父组件传递的属性。我们可以指定属性的类型和是否是必需的。在这个例子中，我们指定了message属性的类型为字符串，并设置为必需的（required）。

当父组件的数据发生变化时，子组件会自动更新渲染，并显示父组件传递过来的数据。

通过这种方式，我们可以轻松地将数据从父组件传递到子组件，实现组件间的数据传递和通信。同时，使用 Props 属性还可以保证父组件和子组件之间的数据流清晰明了，便于维护和追踪数据变化。

子组件向父组件传递数据

$emit 触发自定义事件

当子组件需要向父组件传递数据时，可以使用$emit方法触发自定义事件。通过自定义事件，子组件可以向父组件发送任意类型的数据。

父组件：

<template><div><h1>父组件</h1><ChildComponent @childEvent="handleChildEvent" /><p>接收到子组件传递的数据：{{ childData }}</p></div>
</template><script>
import ChildComponent from "./ChildComponent.vue";export default {components: {ChildComponent,},data() {return {childData: "",};},methods: {handleChildEvent(data) {this.childData = data;},},
};
</script>

子组件：

<template><div><h2>子组件</h2><button @click="sendData">发送数据给父组件</button></div>
</template><script>
export default {methods: {sendData() {this.$emit("childEvent", "Hello, Parent!");},},
};
</script>

在这个例子中，子组件通过$emit方法触发了一个名为childEvent的自定义事件，并传递了一个字符串数据Hello, Parent!。

在父组件中，我们在子组件的标签上使用了childEvent监听子组件触发的childEvent事件，并在ChildEvent方法中处理收到的数据，将其保存到childData变量中。

当我们点击子组件中的按钮时，sendData方法会被触发，通过$emit触发childEvent事件，父组件中的handleChildEvent方法会被调用，接收到子组件传递的数据并更新childData变量。

通过以上的这种方式，子组件可以方便地向父组件传递数据，实现组件间的双向通信。

Props和$emit是最常见的组件通信方式，也是应用最广泛的通信方式。

二. 兄弟组件通信

在 Vue 中，兄弟组件之间没有直接的通信方式。但我们可以通过共同的父组件来实现兄弟组件的通信。

使用共同的父组件作为中介

  • 通过共同的父组件来传递数据或触发事件，实现兄弟组件之间的通信。

  • 父组件作为中介，在接收到一个组件的数据或事件后，再将其传递给另一个组件。

这是一种简单的方式，通过共同的父组件作为中介，在父组件中存储需要共享的数据，并通过 props 将数据传递给需要通信的兄弟组件，当其中一个兄弟组件修改数据时，通过触发事件，将数据传递给父组件，然后由父组件将数据传递给其他兄弟组件。

父组件 Parent.vue

<!-- Parent.vue -->
<template><div><ChildA :message="message" @emitMessage="handleMessage" /><ChildB :message="message" /></div>
</template><script>
export default {data() {return {message: "",};},methods: {handleMessage(message) {this.message = message;},},
};
</script>

子组件 ChildA.vue

<!-- ChildA.vue -->
<template><div><input v-model="message" /><button @click="sendMessage">发送消息</button></div>
</template><script>
export default {props: ["message"],methods: {sendMessage() {this.$emit("emitMessage", this.message);},},
};
</script>

子组件 ChildB.vue

<!-- ChildB.vue -->
<template><div><p>接收到的消息：{{ message }}</p></div>
</template><script>
export default {props: ["message"],
};
</script>

在这个示例中，Parent.vue 作为两个兄弟组件 ChildA.vue 和 ChildB.vue 的共同父组件。ChildA.vue 通过 props 接收一个 message 属性，并在按钮点击事件时通过 emit 方法将 message 传递给 Parent.vue。Parent.vue 接收到 ChildA.vue 发送的消息后，通过 data 属性将 message 传递给 ChildB.vue，ChildB.vue 则通过 props 接收 message 并进行展示。

通过这种方式，兄弟组件之间可以进行通信，实现数据的共享和更新。

父子组件通信和兄弟组件通信都是常见的组件通信，其他的譬如“跨级组件”、“非父子组件”之间是如何通信的？是否还有其他的通信方式？

三. 选择最佳的通信方式

在实际开发中，有多种方式可以实现 Vue 组件通信，每种方式都有自己的特点和适用场景。以下是 Vue 组件通信的常见方式及其最佳实践总结：

1. Props 和 $emit

说明：

  • Props: 父组件通过属性传递数据给子组件，子组件通过 props 接收数据。适用于父子组件之间的通信。

  • $emit: 子组件通过触发自定义事件并传递数据给父组件，父组件通过 $emit 监听子组件的事件。适用于子组件向父组件传递数据和触发特定操作。

最佳实践：

在父子组件之间进行简单的数据传递、状态管理和发事件时，使用 Props 和$emit 是一种简单有效的方式。

2. Vuex（状态管理）

说明：

  • Vuex 是 Vue 官方提供的状态管理模式和库，它将全部组件的状态集中存储在一个全局的 Store 中，通过 Mutations、Actions 和 Getters 等进行状态的修改、操作和获取。

  • 适用于大型复杂应用中多个组件之间的共享状态管理和通信。

详细了解请查看：

Vuex 入门与实战：了解 Vue 状态管理的核心概念icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142381694

Vuex 进阶知识：如何优雅的进行 Vue 的状态管理icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142381737

最佳实践：

当应用中组件之间的状态共享较多，或需要进行异步操作和复杂的数据处理时，使用 Vuex 可以更好地管理和同步数据。

3. EventBus（事件总线）

说明：

  • EventBus 是一种基于发布/订阅模式的事件机制，它通过一个中央事件总线来进行多个组件之间的通信。通过发布事件和订阅事件来实现组件之间的信息传递。

  • 适用于多个组件之间的松散耦合的通信需求。

详细了解请查看：

组件通信的桥梁：探索 Vue 事件总线的原理与应用icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142351702

最佳实践：

当应用的组件之间关系较为复杂，需要松耦合的通信时，EventBus 是一种简洁方便的方式。但需注意在大型应用中，事件命名的规范和管理。

4. Provide/Inject（依赖注入）

说明：

  • Provide/Inject 是一种祖先组件向所有子孙后代组件进行数据传递的方式。通过在祖先组件中 provide 数据，然后在子组件中 inject 接收使用。

  • 适用于跨级组件之间进行数据传递，避免了多层级嵌套组件传递数据的繁琐。

详细了解请查看：

组件通信的“传送门”：深入剖析 Vue 中的依赖注入机制icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142351790

最佳实践：

在多层级嵌套的组件关系中需要进行数据传递时，Provide/Inject 是一种简洁高效的方式。但需注意数据的可追踪性和组件之间依赖的关系。

总结

选择合适的组件通信方式需要根据实际应用场景和需求来决定：

  1. 在简单的父子组件通信中，Props 和$emit 是最常见的方式；

  2. 在复杂的状态管理和异步操作中，使用 Vuex 可以更好地管理数据；

  3. 在多个组之间需要进行松散耦合的通信时，EventBus 是一种常用的方式；

  4. 在多层级嵌套组件中大范围进行数据传递时，Provide/Inject 可以简化传递过程。

根据具体情况选择最合适的组件通信方式，可以提高代码的可维护性和扩展性。

有兴趣的同学可以查阅我之前的有关组件通信的文章：

组件通信的桥梁：探索 Vue 事件总线的原理与应用icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142351702

组件通信的“传送门”：深入剖析 Vue 中的依赖注入机制icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142351790

Vuex 入门与实战：了解 Vue 状态管理的核心概念icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142381694

Vuex 进阶知识：如何优雅的进行 Vue 的状态管理icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142381737

 


http://www.ppmy.cn/server/121770.html

相关文章

智算中心动环监控：构建高效、安全的数字基础设施@卓振思众

智算中心动环监控：构建高效、安全的数字基础设施@卓振思众

在当今快速发展的数字经济时代&#xff0c;智算中心作为人工智能和大数据技术的核心支撑设施&#xff0c;正日益成为各行业实现智能化转型的重要基石。为了确保这些高性能计算环境的安全与稳定&#xff0c;卓振思众动环监控应运而生&#xff0c;成为智算中心管理的重要组成部分…
阅读更多...
显示屏显示缺陷检测系统源码分享

显示屏显示缺陷检测系统源码分享

显示屏显示缺陷检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…
阅读更多...
C++之STL—List 链表

C++之STL—List 链表

双向链表 链表的组成&#xff1a;链表由一系列**结点**组成 结点的组成&#xff1a;一个是存储数据元素的**数据域**&#xff0c;另一个是存储下一个结点地址的**指针域** STL中的链表是一个双向循环链表 构造函数 List 赋值和交换 容器大小操作 - 判断是否为空 --- empty - …
阅读更多...
vue3ScrollSeamless滚动如何给子元素添加点击事件：事件委托

vue3ScrollSeamless滚动如何给子元素添加点击事件：事件委托

页面布局如上截图 下面是方法 function parentClick(e) {if (e.target.tagName A) {router.push({path: /noticeDetails,query: {id: e.target.dataset.eid}});} }使用的时候&#xff0c;可以打印一下方法里面的e&#xff0c;加深理解
阅读更多...
vue3怎么使用Vue.prototype.$loading来实现定义全局的变量和函数

vue3怎么使用Vue.prototype.$loading来实现定义全局的变量和函数

vue2中我们可以在main.js里面通过Vue.prototype.$loading"ddddd"来定义全局变量。其他页面直接使用this.$loading就可以获取值。 vue3中也想实在这个功能怎么办&#xff1f; import App from "./App.vue"; import { createApp } from "vue"; co…
阅读更多...
Altium Designer(AD)百度云下载与安装（附安装步骤）

Altium Designer(AD)百度云下载与安装（附安装步骤）

在我们日常使用当中&#xff0c;Altium designer常常也被简称为AD&#xff0c;是一款一体化的电子产品开发系统软件&#xff0c;主要运行在Windows操作系统上。 我们通过Altium designer把原理图设计、电路仿真、PCB绘制编辑、拓扑逻辑自动布线、信号完整性分析和设计输出等技…
阅读更多...
828华为云征文 | 在华为云上通过Docker容器部署Elasticsearch并进行性能评测

828华为云征文 | 在华为云上通过Docker容器部署Elasticsearch并进行性能评测

目录 前言 1. 华为云X实例介绍及优势 1.1 柔性算力 1.2 vCPU和内存的灵活配比 1.3 成本效益与性能 2. 安装并运行 Docker 2.1 修改仓库配置文件 2.2 安装 Docker 2.3 启动 Docker 3. 使用Docker部署Elasticsearch 3.1 拉取Elasticsearch镜像 3.2 启动Elasticsearch…
阅读更多...
KU060信号处理板卡设计原理图： 385-基于6U CPCIe的TMS320C6678+KU060的信号处理板卡

KU060信号处理板卡设计原理图： 385-基于6U CPCIe的TMS320C6678+KU060的信号处理板卡

基于6U CPCIe的TMS320C6678KU060的信号处理板卡 一、板卡概述 基于6U CPCIe的C6678KU060的信号处理板卡是新一代FPGA的高性能处理板卡。板卡采用一片TI DSP TMS320C6678和一片Xilinx公司 XCKU060-2FFVA1156I作为主处理器&#xff0c;Xilinx 的Aritex XC7A200T作为辅助处…
阅读更多...
最新文章

Copyright @ 2022~2023