vue3爷孙组件通信——provide和inject

父组件中提供数据,并在子组件中注入这些数据,从而实现了组件之间的数据传递。可用于兄弟组件通信,爷孙组件通信,父子通信。

在这里插入图片描述

在这里插入图片描述


provide( ‘注入名’, 注入值" ) 和 inject(‘注入名’)

第一代组件:

  <template><div >我是第一代组件</div><Two /> </template><script setup lang='ts'>import Two from "./components/Two";  // 引入第二代组件import { provide, ref} from 'vue';const obj = ref<any>({name: 'coderkey',age:18})provide('userInfo',obj )</script>

第二代组件:

  <template><div >我是第二代组件</div><Three /> </template><script setup lang='ts'>import Three from "./components/Three ";  // 引入第三代组件</script>

第三代组件:

  <template><div >我是第三代组件</div></template><script setup lang='ts'>import { inject, ref,onMounted } from 'vue';const obj = ref<any>({name: 'coderkey',age:18})onMounted(() =>{const msg = inject('userInfo')console.log(msg.value)  // {name: 'coderkey',age:18}  // 响应式数据})</script>

这样子第一代组件的数据就可以传递给第三代组件使用了,数据还是响应式的。


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

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

相关文章

2024十大首码地推拉新app平台,一手首码对接平台!

到了2024年&#xff0c;地推新应用的接单平台成为创业者们关注的焦点。对于地推行业的从业人员而言&#xff0c;选择一家拥有一手单资源的平台至关重要&#xff0c;因为这直接关系到他们的利益。 2024年如果想要进行app地推活动&#xff0c;却没有人脉渠道的困扰&#xff0c;建…

Jmeter+InfluxDB+Grafana性能测试数据展示

JmeterInfluxDBGrafana提供了一种更好的对Jmeter压测结果的实时监控展示。可以理解为数据源产生的数据加上时间记录并存储&#xff0c;然后使用各种开源图表组件进行展示。实现jmeter报告的更好的可视化展示 1&#xff09;方便测试结果数据落地以及更好的分析 2&#xff09;将…

vue引入并使用物理引擎matter.js

1.效果 vue引入并使用物理引擎matter.js 2.什么是matter.js? Matter.js 是一个开源的2D物理引擎&#xff0c;专为Web浏览器设计&#xff0c;使用JavaScript编写。它允许开发者在网页上创建包含物理交互的动态图形和游戏。Matter.js 提供了一系列强大的功能&#xff0c;使得模拟…

flag-gems的装饰器point-wise分析

一 函数入口 def pointwise_dynamic(f: Optional[JITFunction] = None,*,num_inputs: Optional[int] = None,is_tensor: Optional[List[bool]] = None,dtypes: Optional[List[Optional[type]]] = None,num_outputs: Optional[int] = None,output_dtypes: Optional[List[type]]…

vue3 +elementPlus上传照片墙

获取到照片字符串然后push到fileList对应的URL中 if (formData.value.pictures) {let zz formData.value.pictures.split(",")zz.forEach((item) > {fileList.value.push({ url: item })})}对应表单 <el-form-item label"内容详情图"><el-up…

【数据集管理】使用 Fiftyone 管理数据集,大型数据集也不在话下!

【数据集管理】使用 Fiftyone 管理数据集&#xff0c;大型数据集也不在话下&#xff01; 1. Fiftyone 安装2. 数据集的加载与导出2.1 本地数据集操作2.1.1 创建 session2.1.2 加载数据集2.1.2.1 加载 YOLO 格式的数据集2.1.2.2 加载本地数据库中的数据集2.1.2.3 同时加载数据集…

2024《汽车出海全产业数据安全合规发展白皮书》下载

随着中国制造向中国智造目标的迈进&#xff0c;中国汽车正以前所未有的速度和质量&#xff0c;在全球市场上开疆拓土。不过&#xff0c;在中国汽车加快出海步伐的过程中&#xff0c;数据安全合规风险管理成为车企不容忽视的课题。 6月25日&#xff0c;在中国&#xff08;上海&…

从万里长城防御体系看软件安全体系建设@安全历史03

长城&#xff0c;是中华民族的一张重要名片&#xff0c;是中华民族坚韧不屈、自强不息的精神象征&#xff0c;被联合国教科文组织列入世界文化遗产名录。那么在古代&#xff0c;长城是如何以其复杂的防御体系&#xff0c;一次次抵御外族入侵&#xff0c;而这些防御体系又能给软…

银行批处理系统设计模块

银行批处理系统是一种关键的后台处理系统&#xff0c;它通常在非高峰时段处理大量交易和数据。这种系统的设计需要考虑高可靠性、安全性、准确性和效率。以下是设计银行批处理系统时可能包含的一些核心模块&#xff1a; 1. **输入模块**&#xff1a; - 负责接收各种来源的数…

上海高考志愿填报小程序开发的主要功能

6月毕业季&#xff0c;高考学子刚经历了激烈的高考角逐&#xff0c;又迎来了志愿填报的大关。面对影响一生的高考志愿&#xff0c;如何填报显得尤为重要&#xff0c;面对广大学子的填报需求&#xff0c;上海高考志愿填报小程序为高考学子带来了福音。 一&#xff0e; 上海高考…

ESP32代码开发入门

ESP-IDF ESP-ADF开发 开发概要 编译环境及SDK搭建 整个开发流程是:下载ESP-IDF, ESP-ADF(按需下载),并安装, 编写hello world工程,编译并烧录到主板验证 可参照ESP32 esp-idf esp-adf环境安装及.a库创建与编译api大部分可以用glibc的接口 做了封装,时间time(NULL), 创建线程p…

端到端图像分类算法开发实战:从 Arm 虚拟硬件到 Grove Vision AI Module V2 物理硬件

端到端图像分类算法开发实战&#xff1a;从 Arm 虚拟硬件到 Grove Vision AI Module V2 物理硬件 文章目录 1. 写在前面2. 产品简介2.1 Arm 虚拟硬件镜像产品简介2.2 Grove - Vision AI V2 产品简介 3. 实验前准备4. 实验步骤4.1 模型训练4.2 Arm 虚拟硬件镜像上的部署测试4.2…

福昕阅读器 (Foxit Reader) 详解:打造极致PDF阅读体验

引言 在日常工作和学习中&#xff0c;PDF文件的使用越来越广泛。一款高效、稳定且功能丰富的PDF阅读器能够大大提升我们的工作效率。福昕阅读器 (Foxit Reader) 作为一款备受欢迎的PDF阅读器&#xff0c;以其轻量、高效和强大的功能&#xff0c;成为了许多用户的首选。本文将详…

OpenAI 开启买买买模式:接连收购 Rockset 与 Multi,科技巨头创新布局

引言 最近&#xff0c;OpenAI 在科技领域引起了广泛关注&#xff0c;通过接连收购两家初创公司 Rockset 和 Multi&#xff0c;开启了所谓的“买买买模式”。这一战略举措不仅展现了 OpenAI 对于技术发展的深远布局&#xff0c;也预示着未来更多创新产品的推出。本文将详细探讨…

如何在 Ubuntu VPS 实例上安装 Chef 服务器、工作站和客户端

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 随着组织结构的不断增长和管理环境所需的各个独立组件的扩展&#xff0c;管理每个服务器和服务可能变得难以管理。 配置管理解决方…

Linux通用系统高危漏洞(CVE-2024-1086)修复案例

一、漏洞描述 2024年3月28日&#xff0c; Linux kernel权限提升漏洞&#xff08;CVE-2024-1086&#xff09;的PoC/EXP在互联网上公开&#xff0c;该漏洞的CVSS评分为7.8&#xff0c;目前漏洞细节已经公开披露&#xff0c;美国网络安全与基础设施安全局&#xff08;CISA&#x…

vue 中html 转word 遇到的坑记录

1.单选框的展示 <span style="font-family: Wingdings;font-size: 12pt;">{{items.cellValue == i ? "" : "¡" }} </span>2.多选框的展示 <span style=" font-family: 宋体">{{items.selRadio.includes(ind…

测试:MyBatisDemo

MyBatis Demo 先创建一个 Maven 项目&#xff0c;名称为 MyBatis01。 之后创建并连接 MySQL 数据库&#xff0c;然后执行 sql 脚本&#xff1a; CREATE DATABASE mybatis;USE mybatis;DROP TABLE IF EXISTS user;CREATE TABLE user ( id int(20) NOT NULL, name varchar(30)…

数据治理新纪元:筛斗数据引领企业信息优化潮流

数据治理新纪元&#xff1a;筛斗数据引领企业信息优化潮流 随着数字化时代的深入发展&#xff0c;数据已成为企业运营和决策的核心驱动力。然而&#xff0c;海量的数据往往伴随着质量参差不齐、格式各异等问题&#xff0c;如何有效地管理和利用这些数据&#xff0c;成为企业面…

等级保护 | 如何完成等保的建设整改

等级保护整改是等保基本建设的一个阶段。为了能成功通过等级测评&#xff0c;企业要根据等级保护建设要求&#xff0c;对信息和信息系统进行网络安全升级&#xff0c;对定级对象当前不满足要求的进行建设整改&#xff0c;包括技术层面的整改&#xff0c;也包括管理方面的整改。…