Vue2和Vue3组件通信:父子与兄弟间的桥梁

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • Vue2和Vue3组件通信:父子与兄弟间的桥梁
      • 父组件向子组件传递数据
      • 子组件向父组件传递数据
    • 兄弟组件间的数据传输
      • 使用`provide`/`inject` API
    • 跨层级组件间的数据传输
      • 使用事件总线
    • 结语
    • 🎉 往期精彩回顾

Vue2和Vue3组件通信:父子与兄弟间的桥梁

在构建Vue应用时,掌握组件间的数据传输是至关重要的。本文将深入探讨Vue 2和Vue 3中父子组件间的通信机制,以及兄弟组件如何通过provide/inject API进行数据共享。我们还将讨论跨层级组件通信的策略,包括使用事件总线(Event Bus)的模式。通过实用的代码示例和清晰的解释,你将学习到如何有效地在不同层级的Vue组件之间传递数据。无论你是Vue新手还是有经验的开发者,本文都将帮助你更好地理解和应用Vue的组件通信模式,从而构建出更加健壮和可维护的应用程序。

父组件向子组件传递数据

<!-- 父组件 -->
<template><ChildComponent :parentMessage="message" />
</template><script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const message = ref('来自父组件的消息');
</script>
<!-- 子组件 -->
<template><div>{{ parentMessage }}</div>
</template><script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({parentMessage: String
});
</script>

子组件向父组件传递数据

<!-- 子组件 -->
<template><button @click="sendMessageToParent">点击我发送消息给父组件</button>
</template><script setup lang="ts">
import { defineEmits } from 'vue';
const emit = defineEmits(['message-from-child']);function sendMessageToParent() {emit('message-from-child', '这是来自子组件的消息');
}
</script>
<!-- 父组件 -->
<template><ChildComponent @message-from-child="receiveMessage" />
</template><script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const receiveMessage = (message: string) => {console.log('父组件接收到的消息:', message);
}
</script>

兄弟组件间的数据传输

使用provide/inject API

<!-- 父组件 -->
<script setup lang="ts">
import { ref, provide } from 'vue';
import SiblingComponentA from './SiblingComponentA.vue';
import SiblingComponentB from './SiblingComponentB.vue';const sharedData = ref('兄弟组件共享的数据');
provide('sharedDataKey', sharedData.value);
</script>
<!-- 兄弟组件A -->
<script setup lang="ts">
import { inject } from 'vue';const sharedData = inject('sharedDataKey');
</script>
<!-- 兄弟组件B -->
<script setup lang="ts">
import { inject } from 'vue';const sharedData = inject('sharedDataKey');
</script>

跨层级组件间的数据传输

跨层级组件的通信可以使用Vuex或Vue 3的provide/inject API,或者通过事件总线(Event Bus)。

使用事件总线

// eventBus.ts
import { reactive, readonly } from 'vue';export const EventBus = reactive({events: new Map<string, Array<(...args: any[]) => void>>()
});export function emit(event: string, ...args: any[]) {if (EventBus.events.has(event)) {EventBus.events.get(event)?.forEach(handler => handler(...args));}
}export function on(event: string, handler: (...args: any[]) => void) {if (!EventBus.events.has(event)) {EventBus.events.set(event, new Array<(...args: any[]) => void>());}EventBus.events.get(event)?.push(handler);
}

在需要发送事件的组件中:

<script setup lang="ts">
import { onMounted } from 'vue';
import { emit } from './eventBus';onMounted(() => {emit('event-name', { data: '这是来自子组件的消息' });
});
</script>

在需要接收事件的组件中:

<script setup lang="ts">
import { onMounted } from 'vue';
import { on } from './eventBus';onMounted(() => {on('event-name', (data) => {console.log('接收到的事件数据:', data.data);});
});
</script>

结语

使用 <script setup> 语法可以让我们以更简洁的方式编写Vue组件,尤其是在TypeScript的支持下,我们可以享受到更好的类型推断和自动补全。这使得组件间的通信代码更加清晰和易于维护。在构建大型应用时,合理地使用这些通信模式将有助于保持应用的模块化和可扩展性。

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

前端与后端协同:实现Excel导入导出功能
Java日期格式化:掌握时间的艺术
JavaScript日期格式化:从原始值到用户友好的字符串
入门教程:Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程
Spring Boot单元测试全指南:使用Mockito和AssertJ
Yarn简介及Windows安装与使用指南
H5实现3D旋转照片墙教程
Element-Plus 实现动态渲染图标教程
MyBatis-Plus分页接口实现教程:Spring Boot中如何编写分页查询
Element-Plus下拉菜单边框去除教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D Matching:实现halcon中的find_surface_model

halcon中的三维匹配大致分为两类&#xff0c;一类是基于形状的(Shape-Based)&#xff0c;一类是基于表面的(Surface-Based)。基于形状的匹配可用于单个2D图像中定位复杂的3D物体&#xff0c;3D物体模型必须是CAD模型&#xff0c;且几何边缘清晰可见&#xff0c;使用的相机也要预…

性能优化原则

相关链接&#xff1a;【运行环境】加载资源的形式 性能优化 1 性能优化原则 多使用内存、缓存或其他方法 减少CPU计算量&#xff0c;减少网络加载耗时 &#xff08;适用于所有编程的性能优化----空间换时间&#xff09; 2 从何入手 性能优化-让加载更快 减少资源体积&#x…

iPad手绘+Ai二合一课程,Procreate+Mj+SD零基础到精通(10节视频课)

课程内容&#xff1a; 1 系统课 AI辅助设计流-从零进阶轻松驾驭AI设计,mp4 2 商务沟通阶段 ChatGPT Midjourney-聊天机器人 项目调研资料收集 ,mp4 3_商务沟通阶段 ChatGPT_Midjourney-Midjourney基础 界面初识初步设置 .mp4 4_商务沟通阶段 ChatGPT_Midjourney-Midjourney…

康谋分享 | aiSim5 物理相机传感器模型验证方法(一)

摘要&#xff1a; aiSim5可以实时模拟复杂的传感器配置&#xff0c;在多GPU分布式渲支持的支持下&#xff0c;aiSim可以渲染20多个摄像头、10多个雷达和10多个激光雷达在同一环境下运行。aiSim5独有的实时渲染引擎能够满足对物理精确环境和天气模拟的所有要求&#xff0c;具有…

【MATLAB源码-第3期】基于MATLAB的256QAM误码率曲线,使用IQ调制解调,以及星座图展示。

1、算法描述 正交幅度调制&#xff08;QAM&#xff0c;Quadrature Amplitude Modulation&#xff09;是一种在两个正交载波上进行幅度调制的调制方式。这两个载波通常是相位差为90度&#xff08;π/2&#xff09;的正弦波&#xff0c;因此被称作正交载波。这种调制方式因此而得…

虚幻引擎启动报错记录

0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法&#xff1a;首先查看堆栈信息&#xff0c;我的项目启动是因为默认场景编译不过&#xff0c;进到编辑器配置文…

蓝桥杯真题代码记录(直线

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 在平面直角坐标系中&#xff0c;两点可以确定一条直线。如果有多点在一条直线上&…

新零售SaaS架构:客户管理系统架构设计(万字图文总结)

什么是客户管理系统&#xff1f; 客户管理系统&#xff0c;也称为CRM&#xff08;Customer Relationship Management&#xff09;&#xff0c;主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理&#xff0c;吸引和留存客户&#xff0c;实现缩短销售周…

CentOS上使用cgroup限制进程使用内存

安装cgroup 要使用cgroup首先需要系统支持&#xff0c;需要安装两个rpm包 yum install libcgroup libcgroup-tools 创建限制内存的cgroup组 cgroup组需要在/sys/fs/cgroup/memory目录下创建&#xff0c;我们创建一个限制进程内存大小为10M的cgroup组&#xff0c;这个组中内存…

CUDA 12.4文档2 内核线程架构

本博客参考官方文档进行介绍&#xff0c;全网仅此一家进行中文翻译&#xff0c;走过路过不要错过。 官方网址&#xff1a;https://docs.nvidia.com/cuda/cuda-c-programming-guide/ 本文档分成多个博客进行介绍&#xff0c;在本人专栏中含有所有内容&#xff1a; https://bl…

C++设计模式:单例模式(十)

1、单例设计模式 单例设计模式&#xff0c;使用的频率比较高&#xff0c;整个项目中某个特殊的类对象只能创建一个 并且该类只对外暴露一个public方法用来获得这个对象。 单例设计模式又分懒汉式和饿汉式&#xff0c;同时对于懒汉式在多线程并发的情况下存在线程安全问题 饿汉…

【优选算法专栏】专题十三:队列+宽搜(一)

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

智能边缘自动化:HDMI接口钡铼ARM工业电脑实践案例

一款具备HDMI接口的高性能ARM工业计算机应运而生&#xff0c;为实现在工业4.0时代的关键数据实时处理与可视化管理提供了强有力的硬件支撑。这款计算机依托其独特的边缘计算能力&#xff0c;完美解决了工业环境中大规模数据传输至云端的高延迟问题&#xff0c;成功实现了OT&…

Asp .Net Core 系列:集成 Refit 和 RestEase 声明式 HTTP 客户端库

背景 .NET 中 有没有类似 Java 中 Feign 这样的框架&#xff1f;经过查找和实验&#xff0c;发现 在 .NET 平台上&#xff0c;虽然没有直接的 Feign 框架的端口&#xff0c;但是有一些类似的框架和库&#xff0c;它们提供了类似的功能和设计理念。下面是一些在 .NET 中用于声明…

基于springboot实现宠物咖啡馆平台管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现宠物咖啡馆平台演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于Spring Boot的宠物咖啡馆平台的设计与实现的开发全过程。通过分析基于Spring Boot的宠物咖啡馆平台的设计与实现管理…

ExoPlayer停止更新,建议升级到AndroidX Media3

1. 大家常用的ExoPlayer地址&#xff1a;GitHub - google/ExoPlayer: An extensible media player for Android ExoPlayer是谷歌官方提供的媒体播放库&#xff0c;大家在开发项目中经常使用ExoPlayer播放音视频&#xff0c;谷歌官方已经明确表示该库在2024-04-03停止更新&…

【图论】详解链式前向星存图法+遍历法

细说链式前向星存图法 首先要明白&#xff0c;链式前向星的原理是利用存边来进行模拟图。 推荐左神的视频–建图、链式前向星、拓扑排序 比方说有这样一张图&#xff0c;我们用链式前向星来进行模拟时&#xff0c;可以将每一条边都进行编号&#xff0c;其中&#xff0c;红色的…

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书)

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书) 前言 现在https大行其道, ssl又是必不可少的环节. 今天就教大家用开源工具openssl自己生成ssl证书的文件和私钥 环境 MAC电脑 openssl工具自行搜索安装 正文 1、终端执行命令 //生成rsa私钥&…

自动化 单元测试Test

XCTest测试框架(单元测试XCTests、性能测试XCPPerformanceTests、用户界面测试XCUItests) 单元测试XCTests&#xff1a;测试应用中事件或逻辑是否预期工作。 用户界面测试XCUItests&#xff1a;测试用户与应用的UI交互(如点击按钮、滑动屏幕)。 性能测试XCPPerformanceTests&am…

云手机解决海外社媒运营的诸多挑战

随着海外社交媒体运营的兴起&#xff0c;如何有效管理多个账户成为了一项挑战。云手机作为一种新兴的解决方案&#xff0c;为海外社媒运营带来了前所未有的便利。 云手机的基本原理是基于云计算和虚拟化技术&#xff0c;允许用户在物理手机之外创建和使用多个虚拟手机。这种创新…