当前位置：首页 > news >正文

Vue.js 组件之间的通信模式

news 来源：原创 2025/6/11 9:53:28

Vue.js 组件之间的通信模式

组件之间的通信模式

在 Vue.js 中，组件之间的通信是构建复杂应用的关键。根据组件之间的关系和需求，Vue 提供了多种通信方式。本文介绍了常见的通信模式及其详细示例。

一、父子组件通信

1. 父组件向子组件传递数据（Props）

示例：

父组件：

<template><div><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentMessage: 'Hello from Parent!'};}
};
</script>

子组件：

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

流程图：

ParentComponent||--(props: message)--> ChildComponent

2. 子组件向父组件发送消息（自定义事件）

示例：

子组件：

<template><div><button @click="notifyParent">Notify Parent</button></div>
</template><script>
export default {methods: {notifyParent() {this.$emit('childEvent', 'Data from Child');}}
};
</script>

父组件：

<template><div><ChildComponent @childEvent="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {methods: {handleChildEvent(data) {console.log(data);}}
};
</script>

流程图：

ChildComponent||--($emit: childEvent)--> ParentComponent

二、兄弟组件通信

1. 通过事件总线（Event Bus）

示例：

创建事件总线：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

兄弟组件 A：

<template><div><button @click="sendMessage">Send Message to Sibling</button></div>
</template><script>
import { EventBus } from './eventBus';export default {methods: {sendMessage() {EventBus.$emit('messageEvent', 'Hello from Sibling A');}}
};
</script>

兄弟组件 B：

<template><div><p>{{ message }}</p></div>
</template><script>
import { EventBus } from './eventBus';export default {data() {return {message: ''};},created() {EventBus.$on('messageEvent', (data) => {this.message = data;});}
};
</script>

流程图：

SiblingA||--($emit: messageEvent)--> EventBus||--($on: messageEvent)--> SiblingB

三、跨层级组件通信

1. 通过 Provide 和 Inject

示例：

祖先组件：

<template><div><ChildComponent /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {provide: {sharedData: 'Data from Ancestor'},components: {ChildComponent}
};
</script>

后代组件：

<template><div><p>{{ sharedData }}</p></div>
</template><script>
export default {inject: ['sharedData']
};
</script>

流程图：

AncestorComponent||--(provide: sharedData)--> DescendantComponent

四、全局状态管理

1. 通过 Vuex

示例：

创建 Vuex Store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {message: 'Hello from Vuex'},mutations: {updateMessage(state, payload) {state.message = payload;}}
});

组件 A：

<template><div><button @click="changeMessage">Change Message</button></div>
</template><script>
import { mapMutations } from 'vuex';export default {methods: {...mapMutations(['updateMessage']),changeMessage() {this.updateMessage('New message from Component A');}}
};
</script>

组件 B：

<template><div><p>{{ message }}</p></div>
</template><script>
import { mapState } from 'vuex';export default {computed: {...mapState(['message'])}
};
</script>

流程图：

ComponentA||--(commit: updateMessage)--> Vuex Store||--(state: message)--> ComponentB

总结

父子组件通信：使用 props 和自定义事件。
兄弟组件通信：使用事件总线（Event Bus）。
跨层级组件通信：使用 provide 和 inject。
全局状态管理：使用 Vuex。

根据具体的应用场景，选择合适的通信方式可以提高开发效率和代码可维护性。

Vue.js 组件之间的通信模式

Vue.js 组件之间的通信模式组件之间的通信模式在 Vue.js 中，组件之间的通信是构建复杂应用的关键。根据组件之间的关系和需求，Vue 提供了多种通信方式。本文介绍了常见的通信模式及其详细示例。一、父子组件通信 1. 父组件向子组件传递数据&#…...

编程日记 2025/6/1 19:50:40

【Linux 重装】Ubuntu 启动盘 U盘无法被识别，如何处理？

背景 U盘烧录了 Ubuntu 系统作为启动盘，再次插入电脑后无法被识别解决方案（Mac 适用） （1）查找 USB，（2）格式化（1）在 terminal 中通过 diskutil list 查看是…...

编程日记 2025/6/3 16:24:28

.Net Core微服务入门全纪录（四）——Ocelot-API网关（上）

系列文章目录 1、.Net Core微服务入门系列（一）——项目搭建 2、.Net Core微服务入门全纪录（二）——Consul-服务注册与发现（上） 3、.Net Core微服务入门全纪录（三）——Consul-服务注…...

编程日记 2025/6/1 19:50:26

pyautogui自动化鼠标键盘操作

pyautogui，用来写自动化脚本，比按键精灵更方便。pyautogui.position()可以获取当前鼠标位置。pyautogui不支持中文输入，利用 pyperclip从剪切板粘贴输入。 # -*- coding: utf-8 -*- import time import os import traceback import logging …...

编程日记 2025/6/3 0:08:55

2024年AI大模型技术年度总结与应用实战：创新与突破并进

前言回顾2024年，我一共发布了286篇博文，粉丝数也达到了43000多。这一年里，我收获颇丰，始终坚持AI大模型的研究方向，并且积极开展大模型的实战应用，也取得了一系列令人振奋的突破。在286篇博文中&#…...

编程日记 2025/6/1 9:04:29

HTML中相对路径和绝对路径详解

文章目录 HTML中相对路径和绝对路径详解一、引言二、绝对路径1、定义2、使用场景3、代码示例三、相对路径1、定义2、使用方法3、代码示例四、使用示例1、图片路径2、CSS和JavaScript文件路径3、页面内部链接五、总结 HTML中相对路径和绝对路径详解一、引言在HTML开发中&a…...

编程日记 2025/6/4 1:32:00

联通用户管理系统（一）

#联通用户管理系统（一） 1.新建项目如果你是windows的话，界面应该是如下的： 2.创建app python manage.py startapp app01一般情况下：我们是在pycharm的终端中运行上述指令，但是pychrm中为我们提供了工具…...

编程日记 2025/6/2 14:38:37

STM32-CAN总线

1.CAN总线简介 CAN总线是由BOSCH公司开发的一种简洁易用、传输速度快、易扩展、可靠性高的串行通信总线 2.CAN总线特征两根通信线（CAN_H、CAN_L），线路少，无需共地差分信号通信（相对的是单端信号）&#…...

编程日记 2025/6/1 17:40:48

mac m1下载maven安装并配置环境变量

下载地址：Download Apache Maven – Maven 解压到一个没有中文和空格的文件夹输入pwd查看安装路径输入cd返回根目录再输入 code .zshrc 若显示 command not found: code你可以通过以下步骤来安装和配置 code 命令： 1. 确保你已经安装了 Visual Studio…...

编程日记 2025/6/4 4:44:06

Linux -- HTTP 请求与响应报文

目录请求报文： 请求方法响应报文： 状态码与状态码描述共性常见的报头请求报文： 请求方法方法说明GET获取资源POST传输实体主体PUT传输文件HEAD获得报文首部DELETE删除文件OPTIONS询问支持的方法TRACE追踪路径CONNECT要求用…...

编程日记 2025/6/2 5:36:57

oneplus3t-lineage-14编译-android7

lineageOS-14.1-oneplus3t-build.md lineageOS-14(android7)的开发者模式/usb调试(adb)有root功能, 而lineageOS-16(android9)无 oneplus3t-lineage-14编译-android7 1 清华linageos镜像 x lineage-14.1-20180223-nightly-oneplus3-signed.zip ntfs分区挂载为普通用户目录…...

编程日记 2025/6/4 13:22:39

Spring Boot与Spring的区别

在当今的Java开发领域，Spring框架无疑是最为重要且广泛应用的框架之一。而随着技术的不断发展和开发者对效率与便捷性的追求，基于Spring框架的Spring Boot应运而生。接下来，将详细阐述Spring Boot与Spring的主要区别，并通过实际的…...

编程日记 2025/6/4 6:41:51

阿九的python 爬虫进阶课18.3 学习笔记

文章目录前言1. 爬取大标题2. 爬取小标题3. 证券栏下的标题4. 某篇文章里的具体内容前言网课链接：https://www.bilibili.com/video/BV1kV4y1576b/新浪财经网址：https://finance.sina.com.cn/需先下载库： conda install lxml布置爬取的一…...

编程日记 2025/6/4 6:43:28

对人型机器人的研究和展望

目录概述 1 核心软硬件部件 1.1 运动控制部分 1.1.1 减速机 1.1.2 编码器 1.1.3 直流无刷电机 1.2 智能仿生手 1.3 控制板卡 2 人型机器人的应用 3 未来展望概述如果现在有人问：当前那个行业最火？毫无疑问答案肯定是人型机器人了。当前各类机…...

编程日记 2025/6/3 7:29:16

docker 使用远程镜像启动一个容器

使用前提： 首先你得安装docker,其次你得拥有一个远程镜像 docker run --name io_11281009 --rm -it -p 2233:22 -v .:/root/py -e ed25519_rootAAAAC3NzaC1lZDI1********Oy7zR7l7aUniR2rul ghcr.lizzie.fun/fj0r/io srv对上述命令解释： 1.docker run:…...

编程日记 2025/6/3 18:34:31

VTK知识学习（37）-频域处理

1、前言在图像处理和分析中，经常会将图像从图像空间转换到其他空间中，并利用这些空间的性质对转换后的数据进行分析处理。图像频域处理借助空间变换将图像从图像空间转换到频域空间，根据频域空间的性质对数据进行处理(如滤波)，最…...

编程日记 2025/6/2 23:09:54

什么是软件架构

什么是软件架构程序员说，软件架构是要决定编写哪些C程序或OO类、使用哪些库和框架程序经理说，软件架构就是模块的划分和接口的定义系统分析员说，软件架构就是为业务领域对象的关系建模配置管理员说，软件架构就是开发出来的…...

编程日记 2025/6/4 6:42:24

RoCE网络及其协议栈详解（没有中间商赚差价的网络）

引言随着数据中心对高性能、低延迟通信需求的不断增长，传统的TCP/IP以太网连接已经难以满足现代应用的要求。为了解决这些问题，RDMA（Remote Direct Memory Access）技术应运而生。RDMA是一种允许网络中的不同计算机直接访问对方内…...

编程日记 2025/6/4 6:42:56

el-dialog弹窗的@open方法中，第一次引用ref发现undefined问题，第二次后面又正常了

解决方法直接不用这个open方法，转而用opened，代码例子： <el-dialog title"单个新增" :visible.sync"PlacardShowSingle" opened"openpbSingle()" width"1100px" top"1%" :close-on-c…...

编程日记 2025/6/4 6:42:07

基于阿里云视觉智能平台实现换脸程序

简介阿里云视觉智能平台提供了一种强大的换脸功能，能够将视频中的人脸替换成其他图片中的脸。这种功能广泛应用于视频编辑、特效制作等领域。本文将介绍如何使用阿里云视觉智能平台进行视频换脸。核心工作流程整个换脸程序的实现可分为以下几个主要步骤&#…...

编程日记 2025/6/3 17:18:08

【2024年华为OD机试】(A卷,100分)- 完美走位（Java JS PythonC/C++）

一、问题描述题目解析题目描述在第一人称射击游戏中，玩家通过键盘的 A、S、D、W 四个按键控制游戏人物分别向左、向后、向右、向前进行移动。假设玩家每按动一次键盘，游戏人物会向某个方向移动一步。如果玩家在操作一定次数的键盘并且各个方向的步数相同时，此时游戏人…...

编程日记 2025/6/3 0:04:14

一文夯实垃圾收集的理论基础

如何判断一个引用是否存活引用计数法给对象中添加一个引用计数器，每当有一个地方引用它，计数器就加 1；当引用失效，计数器就减 1；任何时候计数器为 0 的对象就是不可能再被使用的。优点：可即刻回收垃圾&a…...

编程日记 2025/6/4 6:52:59

jenkins-api操作

一. 简述： 在一个比较复杂的环境中， 往往会有自己开发的运维管理平台。在代码发布这块，尽管jenkins有一个比较方便的UI， 但很多团队还是喜欢集中式管理， 将发布功能(仅仅把jenkins作为一个发布组件使用)嵌入运维管理平…...

编程日记 2025/6/3 0:05:40

SpringBoot3+Vue3学习

什么是Spring Boot? Spring Boot 是Spring 提供的一个子项目，用于快速构建Spring应用程序传统方式弊端：之前的项目都用Spring FrameWork构建，需要手动引入依赖，依赖之间有可能存在冲突，较为麻烦；在配置…...

编程日记 2025/6/4 6:45:36

SQL刷题快速入门（三）

其他章节： SQL刷题快速入门（一） SQL刷题快速入门（二） 承接前两个章节，本系列第三章节主要讲SQL中where和having的作用和区别、 GROUP BY和ORDER BY作用和区别、表与表之间的连接操作（重点&…...

编程日记 2025/6/4 2:41:33

Flutter鸿蒙化中的Plugin

Flutter鸿蒙化中的Plugin 前言鸿蒙项目内PluginFlutter端实现鸿蒙端实现创建Plugin的插件类注册Plugin 开发纯Dart的package为现有插件项目添加ohos平台支持创建插件配置插件编写插件内容参考资料前言大家知道Flutter和鸿蒙通信方式和Flutter和其他平台通信方式都是一样的&…...

编程日记 2025/6/2 21:49:38

Ubuntu 22.04.5 修改IP

Ubuntu22.04.5使用的是netplan管理网络，因此需要在文件夹/etc/netplan下的01-network-manager-all.yaml中修改，需要权限，使用sudo vim或者其他编辑器，修改后的内容如下： # Let NetworkManager manage all devices on …...

编程日记 2025/6/4 6:47:38

后端：MyBatis

文章目录 1. MyBatis1-1. Mybatis 工具类的封装1-2. Mybatis 通过集合或实体类传递参数-实现插入数据(增)1-3. MyBatis 实现删除数据(删)1-4. MyBatis 实现修改数据(改)1-5. MyBatis 实现查询数据(查) 2. MyBatis 配置文件中的一些标签和属性2-1.environments标签2-2. dataSour…...

编程日记 2025/6/3 0:04:51

CBAM-2018学习笔记

名称： Convolutional Block Attention Module (CBAM) 来源： CBAM: Convolutional Block Attention Module 相关工作： #ResNet #GoogleNet #ResNeXt #Network-engineering #Attention-mechanism 创新点： 贡献： 提…...

编程日记 2025/6/2 10:05:18

HTML根元素＜html＞的语言属性lang：＜html lang=“en“＞

诸神缄默不语-个人CSDN博文目录在编写HTML页面时，通常会看到<html lang"en">这行代码，特别是在网页的开头部分，就在<!DOCTYPE html>后面。许多开发者可能对这个属性的含义不太了解，它到底有什么作用&…...

编程日记 2025/6/2 21:58:37

解决github无法clone的问题

问题背景 (base) ~$ git clone https://github.com/isaac-sim/IsaacLab.git 正克隆到 IsaacLab... fatal: 无法访问 https://github.com/isaac-sim/IsaacLab.git/：gnutls_handshake() failed: Error in the pull function.解决办法我使用了代理，需要配…...

编程日记 2025/6/4 4:08:27

第1章：Python TDD基础与乘法功能测试

写在前面这本书是我们老板推荐过的，我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后，我突然思考，对于测试开发工程师来说，什么才更有价值呢？如何让 AI 工具更好地辅助自己写代码，或许…...

编程日记 2025/6/2 21:59:09

【华为路由/交换机的ftp文件操作】

华为路由/交换机的ftp文件操作 PC：10.0.1.1 R1：10.0.1.254 / 10.0.2.254 FTP：10.0.2.1 S1：无配置在桌面创建FTP-Huawei文件夹，里面创建config/test.txt。点击上图中的“启动”按钮。然后ftp到server，…...

编程日记 2025/6/1 9:27:58

【HBuilderX 中 Git 的使用】

目录： 一：安装必要的版本控制工具二：把Github上的项目克隆到本地三：将本地的项目上传到Github上一：安装必要的版本控制工具 1️⃣ 安装 TortoiseGit 工具，下载地址：https://tortoisegit.org/do…...

编程日记 2025/6/1 9:00:50

语言模型的价值定位与技术突破：从信息处理到创新认知

标题：语言模型的价值定位与技术突破：从信息处理到创新认知文章信息摘要： 当前语言模型的核心价值主要体现在信息综合与处理能力上，用户友好的交互界面是其成功关键。在模型计算机制方面，推理能力的实现包括chain-of-…...

编程日记 2025/6/4 4:22:21

使用Websocket进行前后端实时通信

1、引入jar，spring-websocket-starter <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2、配置websocket config import org.springframe…...

编程日记 2025/6/2 21:59:25

【Leetcode 热题 100】70. 爬楼梯

问题背景假设你正在爬楼梯。需要 n n n 阶你才能到达楼顶。每次你可以爬 1 1 1 或 2 2 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 数据约束 1 ≤ n ≤ 45 1 \le n \le 45 1≤n≤45 解题过程昨天刚刚当成扩展题做过，今天遇到了再写一次。…...

编程日记 2025/5/18 19:36:34

STM32更新程序OTA

STM32的OTA（Over-The-Air）更新程序是一种通过无线通信方式，为设备分发新软件、配置甚至更新加密密钥的技术。以下是关于STM32 OTA更新程序的详细介绍： 一、OTA升级流程 STM32的OTA升级流程通常包括以下几个关键步骤：…...

编程日记 2025/5/22 22:20:38

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

目录 1 -> WebAPI背景知识 1.1 -> 什么是WebAPI 1.2 -> 什么是API 1.3 -> 什么是DOM 1.3.1 -> DOM树 2 -> 获取元素 2.1 -> querySelector 2.2 -> querySelectorAll 3 -> 事件初识 3.1 -> 基本概念 3.2 -> 事件三要素 4 -> 操…...

编程日记 2025/6/3 22:22:53

计算机创造的奇迹——C语言

一.简介 C语言是一种较早的程序设计语言，诞生于1972年的贝尔实验室。1972 年，Dennis Ritchie 设计了C语言，它继承了B语言的许多思想，并加入了数据类型的概念及其他特性。尽管C 语言是与 UNIX 操作系统一起被开发出来的&#xff…...

编程日记 2025/6/3 22:22:37

TypeScript - 利用GPT辅助学习

TypeScript 一、基础1. 安装 TypeScript2. 创建你的第一个 TypeScript 文件3. 编译 TypeScript 代码4. 变量声明与类型注解5. 函数与类型注解6. 总结二、进阶常用类型1. 类型别名2. 对象类型3. 类型断言4.typeof 操作符高级类型1. 类2. 交叉类型3. 泛型与 keyof4. 索引签名类…...

编程日记 2025/6/3 22:25:10

Node.js 与 JavaScript 是什么关系

JavaScript 是一种编程语言，而 Node.js 是 JavaScript 的一个运行环境，它们在不同的环境中使用，具有一些共同的语言基础，但也有各自独特的 API 和模块，共同推动着 JavaScript 在前后端开发中的广泛应用。一、基础语言…...

编程日记 2025/6/3 22:24:19

Spring MVC：设置响应

目录引言 1. 返回静态页面 1.1 Spring 默认扫描路径 1.2 RestController 1.2.1 Controller > 返回页面 1.2.2 ResponseBody 2. 返回 HTML 2.1 RequestMapping 2.1.1 produces(修改响应的 Content-Type) 2.1.2 其他属性 3. 返回 JSON 4. 设置状态码 4.1 HttpSer…...

编程日记 2025/6/3 22:24:53

c#实现当捕获异常时自动重启程序

首先，需要说明这并不是一个推荐的做法，只有在你确实有这样的需求时才考虑这么做。以下是AI的回答，为什么不推荐这么做，供参考。在C#中，如果你在catch语句中尝试重启程序自身，可能会遇到以下几个问题&…...

编程日记 2025/6/3 22:23:12

游戏引擎学习第84天

仓库:https://gitee.com/mrxiao_com/2d_game_2 我们正在试图弄清楚如何完成我们的世界构建上周做了一些偏离计划的工作，开发了一个小型的背景位图合成工具，这个工具做得还不错，虽然是临时拼凑的，但验证了背景构建的思路。这个过…...

编程日记 2025/6/3 22:23:45

Python----Python高级（文件操作open，os模块对于文件操作，shutil模块）

一、文件处理 1.1、文件操作的重要性和应用场景 1.1.1、重要性数据持久化： 文件是存储数据的一种非常基本且重要的方式。通过文件，我们可以将程序运行时产生的数据永久保存下来，以便将来使用。跨平台兼容性： 文件是一种通用…...

编程日记 2025/6/3 22:24:35

“AI 大模型内容安全审核软件系统：守护网络世界的卫士

在如今这个信息爆炸的互联网时代，网络上的内容那是五花八门、层出不穷。这时候，咱就得靠 AI 大模型内容安全审核软件系统来给咱把把关了。咱就说社交媒体平台吧，每天都有海量的用户在上面发布文字、图片、视频啥的。要是没有一个靠谱的审核系…...

编程日记 2025/6/3 3:18:16

快速入门Python的异步库：asyncio

目录异步 Python asyncio 1. async 关键字 2. await 关键字 3. asyncio.run() 4. asyncio.sleep() 5. 协程程序执行流程可以被等待的异步协程任务 Futures 任务 asyncio.create_task() await 和任务结果 Reference 异步我们首先先来谈谈异步，…...

编程日记 2025/6/3 22:24:02