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;使用的相机也要预…

蓝桥杯-python-破损的楼梯(dp)

问题描述 小蓝来到了一座高耸的楼梯前&#xff0c;楼梯共有 N 级台阶&#xff0c;从第 0 级台阶出发。小蓝每次可以迈上上级或2级台阶&#xff0c;但是&#xff0c;楼梯上的第 a1级、第a2 级、第 a3 级&#xff0c;以此类推&#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…

支持向量机——SVM

SVM 是一种机器学习算法&#xff0c;它的全称是支持向量机&#xff08;Support Vector Machine&#xff09;。它主要用于解决二分类问题&#xff0c;即给定一组数据&#xff0c;将它们分为两类。SVM 的基本思想是在特征空间中寻找一个最优的超平面&#xff0c;使得两类数据在该…

康谋分享 | 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;因此被称作正交载波。这种调制方式因此而得…

[leetcode]longest-consecutive-sequence 最长连续序列

. - 力扣&#xff08;LeetCode&#xff09; 哈希表 思路和算法 我们考虑枚举数组中的每个数 xxx&#xff0c;考虑以其为起点&#xff0c;不断尝试匹配 x1,x2,⋯x1, x2, \cdotsx1,x2,⋯ 是否存在&#xff0c;假设最长匹配到了 xyxyxy&#xff0c;那么以 xxx 为起点的最长连续序…

虚幻引擎启动报错记录

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…

LightGBM+深度学习=推荐模型==点击率预估

目录 LightGBM(Light Gradient Boosting Machine) 决策树模型 离散化处理 LightGBM和深度学习

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

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

ORA-00257:archiver error.Connect internal only,until freed.

问题现象 使用navicat连接oracle时无法连接上去&#xff0c;提示这个错误 问题原因 归档日志占用空间满了&#xff0c;注意这里分为两个 硬盘空间不足了硬盘空间足够但是归档日志空间不够了 解决方案 针对第一种情况&#xff0c;拓展本地硬盘空间&#xff0c;或删除之前日…

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

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

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

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

单片机家电产品--OC门电路

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 单片机家电产品–OC门电路 前言 记录学习单片机家电产品内容 已转载记录为主 一、知识点 1OC门电路和OD门电路的区别 OC门电路和OD门电路的区别 OC门&#xff1a;三极管…

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

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