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下拉菜单边框去除教程

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网盘——登录跳转

在界面设计这块&#xff0c;当登录界面上输入的账号和密码都正确的情况下&#xff0c;直接跳转到好友界面&#xff0c;否则不跳转 1、在opewidget.h里面定义一个单例模式 static OpeWidget &getInstance(); 2、添加定义 产生一个静态的操作界面的对象。操作界面这个对象他…

《零秒思考》像麦肯锡精英一样思考 - 三余书屋 3ysw.net

零秒思考&#xff1a;像麦肯锡精英一样思考 大家好&#xff0c;今天我们要深入探讨的著作是《零秒思考》。在领导提出问题时&#xff0c;我们常常会陷入沉思&#xff0c;却依然难以有所进展&#xff0c;仿佛原地踏步&#xff0c;但是身边的同事却能够立即给出清晰的回答。这种…

Rust面试宝典第1题:爬楼梯

题目 小乐爬楼梯&#xff0c;一次只能上1级或者2级台阶。楼梯一共有n级台阶&#xff0c;请问总共有多少种方法可以爬上楼&#xff1f; 解析 这道题虽然是一道编程题&#xff0c;但实际上更是一道数学题&#xff0c;着重考察应聘者的逻辑思维能力和分析解决问题的能力。 当楼梯只…

Web路径专题

文章目录 1.资源定位1.前置条件上下文路径设置 2.上下文路径介绍重点说明 3.资源定位方式资源路径 上下文路径 资源位置a.html定位C.java定位 4.浏览器和服务器解析的区别1.浏览器解析/&#xff08;地址变化&#xff09;2.服务器解析/&#xff08;地址不变&#xff09; 5.带/…

华为ensp中PPP(点对点协议)中的CHAP认证 原理和配置命令

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月11日6点00分 PPP协议&#xff08;Point-to-Point Protocol&#xff09;是点到点协议&#xff0c;是一种常用的串行链路层协议&#xff0c;用于在两个节点之间建立点…

结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode

系列文章目录 如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸…

PTA 2813:画家问题(熄灯问题)

有一个正方形的墙&#xff0c;由NN个正方形的砖组成&#xff0c;其中一些砖是白色的&#xff0c;另外一些砖是黄色的。Bob是个画家&#xff0c;想把全部的砖都涂成黄色。但他的画笔不好使。当他用画笔涂画第(i,j)个位置的砖时&#xff0c; 位置(i−1,j)、 (i1,j)、(i,j−1)、(i…

HJ13 句子逆序(句子反序,再把单词反序)

句子反序&#xff0c;再把单词反序 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别String s sc.n…

本地化部署离线开源免费语音识别API,支持多模态AI能力引擎

思通数科作为一家专注于多模态AI能力开源引擎平台&#xff0c;其技术产品涵盖了自然语言处理、情感分析、实体识别、图像识别与分类、OCR识别以及语音识别等多个领域。在语音识别这一细分市场&#xff0c;思通数科的技术产品中的音频文件转写服务有着相似的应用场景和功能特点。…

如何将powerpoint(PPT)幻灯片嵌入网页中在线预览、编辑并保存到服务器?

猿大师办公助手不仅可以把微软Office、金山WPS和永中Office的Word文档、Excel表格内嵌到浏览器网页中实现在线预览、编辑保存等操作&#xff0c;还可以把微软Office、金山WPS和永中Office的PPT幻灯片实现网页中在线预览、编辑并保存到服务器。 猿大师办公助手把本机原生Office…

【开发篇】十三、JVM基础参数设置与垃圾回收器的选择

文章目录 1、-Xmx 和 –Xms2、-XX:MaxMetaspaceSize 和 –XX:MetaspaceSize3、-Xss4、不建议改的参数5、其他参数6、选择GC回收器的调试思路7、CMS的并发模式失败现象的解决8、调优案例 GC问题解决方式&#xff1a; 优化JVM基础参数&#xff0c;避免频繁Full GC减少对象的产生…

设计模式学习笔记 - 设计模式与范式 -行为型:9.迭代器模式(上):相比直接遍历集合数据,使用迭代器模式有哪些优势?

概述 上篇文章&#xff0c;我们学习了状态模式。状态模式是状态机的一种实现方式。它通过将事件触发的状态转移和动作执行&#xff0c;拆分到不同的状态类中&#xff0c;以此来避免状态机类中的分支判断逻辑&#xff0c;应对状态机类代码的复杂性。 本章&#xff0c;学习另外…

Day20_学点儿JavaEE_基于Session的登录、数据库null值正确显示

1 登录 使用Session技术完成用户登录的功能&#xff1a; 登录功能会使用到Session&#xff0c;把用户登录的用户名和密码保存到Session&#xff0c;因为Session是属于每个用户独有的&#xff0c;就可以记录每个用户单独的登录信息。 当然&#xff0c;这仅仅是完成了一个简单的…

windows安装charles抓包iphone

安装charles抓包iphone charles基础介绍windows安装 charles基础介绍 Charles 是在 PC 端常用的网络封包截取工具&#xff0c;在做移动开发时&#xff0c;我们为了调试与服务器端的网络通讯协议&#xff0c;常常需要截取网络封包来分析。除了在做移动开发中调试端口外&#xf…

探索GlusterFS:开源分布式文件系统

目录 引言 一、GlusterFS简介 &#xff08;一&#xff09;基本介绍 &#xff08;二&#xff09;GlusterFS特点 &#xff08;三&#xff09;GlusterFS术语 &#xff08;四&#xff09;GlusterFS工作流程 二、GlusterFs的卷类型 &#xff08;一&#xff09;卷类型 &…

vue3中使用antv-S2表格(基础功能版)

先看展示效果&#xff1a; 可以调整行宽、列宽、自定义字段图标、表头图标、添加排序、显示总计、小计等 首先确保搭建一个vue3项目环境&#xff0c;从0开始的小伙伴着重看第一点&#xff1a; 一、搭建vue3项目环境 首先创建一个vue3vitets项目&#xff0c;可以查看下面相关…

铸造大型基础平板的结构应该怎样设计

设计大型基础平板的结构时&#xff0c;需要考虑以下几个方面&#xff1a; 地质条件&#xff1a;首先要了解工程所在地的地质条件&#xff0c;包括土质、地下水位、地震状况等。根据地质条件来选择合适的基础类型&#xff0c;如浅基、深基或地下连续墙等。 荷载分析&#xff1a…

Lumos学习python第九课:VSCode+Anaconda

注意Anaconda版本和Python版本的对应关系&#xff0c;同一个Anaconda可以支持多个Python版本&#xff0c; 注&#xff1a;现在vscode已原生支持jupyter notebook&#xff08;要求Python版本>3.6&#xff09; Anaconda在Python解析器的基础上封装了很多Python包&#xff0c…

Weblogic任意文件上传漏洞(CVE-2018-2894)漏洞复现(基于vulhub)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

C++模板编程

模板是泛型编程的基础&#xff0c;先给出泛型编程的概念。 泛型编程&#xff1a;编写与类型无关的通用代码&#xff0c;是代码复用的一种手段。 应用场景&#xff1a;比如要实现一个通用的&#xff0c;进行两个变量互相交换的函数&#xff0c;此时可以通过函数重载的方式&…