vue3中跨层传递provide、inject

前置说明

  在 Vue 3 中,provideinject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务,然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据,而不需要逐层传递 Props。

模拟场景:三个界面,FatherPage、MiddlePage、SonPage,其中他们也是层级引用的,FatherPage中引用MiddlePage,然而MiddlePage中包含SonPage界面;

此时,我们想将FatherPage中的数据传递给SonPage中,我们可以使用provide和inject直接进行传递:

示例:


FatherPage.vue:
<script setup name="FatherPage" lang="ts">
import MiddlePage from './MiddlePage.vue';const msg = '父亲界面'
</script><template>
<div><h1>{{msg}}</h1><MiddlePage/>
</div>
</template>
MiddlePage.vue
<script setup name="MiddlePage" lang="ts">
import sonPage from '@/components/ProvideIn/son.vue'
</script><template>
<div class="middle"><h2>中间界面</h2><sonPage/>
</div>
</template>
 sonPage.vue
<script setup name="sonPage" lang="ts">
const dataSmg = '儿子界面'</script><template>
<div class="son"><h3>{{dataSmg}}</h3>
</div></template>

 快速上手:

FatherPage中传递的数据:

<script>
import { provide,ref } from 'vue'//顶层组件提供数据
provide('data-key',' This is a father data!!!')
</script>

SonPage中接受的数据:

<script>
import { inject,provide } from 'vue';const dataFather = inject('data-key')
</script>

完整案例:


 FatherPage

<script setup name="FatherPage" lang="ts">
import { provide,inject,ref } from 'vue'import MiddlePage from './MiddlePage.vue';const msg = '父亲界面'//1.顶层组件提供数据
provide('data-key',' This is a father data!!!')//2.向子组件传递响应式数据
const countMsg = ref(10)
provide('count-key',countMsg)//3.向子组件传递方法
const changeCount =  function(){countMsg.value++
}provide('change-key',changeCount)//4.尝试接受子组件的数据
const dataSon = inject('son-key')// //尝试自己定义数据,自己接受不可行
// provide('data-sonKey',' This is a son two data!!!')// const dataSon = inject('data-sonKey')</script><template>
<div><h1>{{msg}}</h1><hr>数据:{{ dataSon }}<button @click="changeCount">点击改变count</button><MiddlePage/>
</div></template><style scoped></style>

MiddlePage

<script setup name="MiddlePage" lang="ts">
import sonPage from '@/components/ProvideIn/son.vue'
</script><template>
<div class="middle"><h2>中间界面</h2><sonPage/>
</div></template><style scoped>
.middle{background-color: aquamarine;
}
</style>

SonPage

<script setup name="sonPage" lang="ts">
import { inject,provide } from 'vue';const dataFather = inject('data-key')
const dataSmg = '儿子界面'const dataCount = inject('count-key')const changeMethod = inject('change-key')//父组件不能接受子组件的数据
// provide('son-key',dataSmg)</script><template>
<div class="son"><h3>{{dataSmg}}</h3><hr>父组件跳跃中间层传递过来的数据:{{ dataFather }}<h3>响应式数据:{{ dataCount }}</h3><button @click="changeMethod">改变父组件的数据</button>
</div></template><style scoped>
.son{background-color: rgb(145, 145, 63);
}
</style>

效果

 

注意事项:

  • provide 和 inject 是全局的,这意味着在整个应用中都可以访问到提供的数据。因此要小心命名冲突。
  • inject 可以在任何组件中使用,但通常在需要跨多层组件共享数据时最为有用。
  • 如果一个组件同时使用了 provide 和 inject,确保它们的键名不会冲突,否则可能会导致意外的行为。

总结:

  1. provide和inject的作用是什么?跨层组件通信
  2. 如何在传递的过程中保持数据响应式?第二个参数传递ref对象
  3. 底层组件想要通知顶层组件做修改,如何做?传递方法,底层组件调用方法
  4. 一颗组件树中只有一个顶层或底层组件吗?相对概念,存在多个顶层和顶层的关系

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Conditional DETR论文笔记

原文链接 [2108.06152] Conditional DETR for Fast Training Convergencehttps://arxiv.org/abs/2108.06152 原文笔记 What 《Conditional DETR for Fast Training Convergence》 这个工作也是针对于DETR Query的工作 用于解决DETR训练收敛慢&#xff08;Object query需要…

2025上海市公务员考试报名流程详细教程

2025年上海市公务员考试报名马上就要开始了&#xff0c;有想要参加上海公务员考试的姐妹们&#xff0c;可以提前了解一下考试报名流程&#xff0c;和报名照制作尺寸要求 报名时间&#xff1a;11月2日0:00至11月8日12:00 南核时间&#xff1a;11月2日0:00至11月8日14:00 缴费…

mysql事务

目录 一、什么是事务 二、事务的四大特点 1.原子性&#xff08;A&#xff09; 2.持久性&#xff08;I&#xff09; 3.隔离性&#xff08;D&#xff09; 4.一致性&#xff08;C&#xff09; 三、怎么使用事务 四、事务的并发问题 1.脏读问题&#xff08;读未提交&#x…

信息学科平台系统构建:Spring Boot框架深度解析

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

Android中SurfaceView与GLSurfaceView 的关系

SurfaceView 与 GLSurfaceView 的关系 在 Android 开发中&#xff0c;SurfaceView 和 GLSurfaceView 是实现自定义渲染效果的关键组件。它们提供了不同的渲染方式&#xff0c;适用于不同的应用场景。我们将通过以下几个方面详细说明 SurfaceView 和 GLSurfaceView 的特点及实现…

【LeetCode:3226. 使两个整数相等的位更改次数 + 模拟 + 位运算】

在这里插入代码片 &#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕…

卷积神经网络实验三:模型优化(1)

作者有话说&#xff1a; 这篇文章写的还是比混乱的。因为本人也是第一次做这样的尝试&#xff0c;虽然接触深度学习有一年了&#xff0c;但是对于模型的优化仅仅是局限于理论上。通过这一次的实验&#xff0c;我对于模型的理解也更深了几分。我不期望这篇文章能帮你能解决多大问…

虚拟内存与物理内存之间的映射关系

当我有a.out 和 b.out 这两个程序 不占用内存&#xff0c;当 变成./a.out ./b.out就会生成0-4g 的进程控制块 占用内存 0-3g用户区 3g-4g内核区 pcb进程控制块本质&#xff1a;struct结构体&#xff08;有成员变量&#xff09;位于内核空间 比如int a10 放在虚拟地址上 肯定不行…

基于树莓派的安保巡逻机器人--(一、快速人脸录入与精准人脸识别)

目录 零、前言 一、人脸检测 二、人脸识别 1、采集人脸 2、训练人脸识别模型 3、人脸识别应用 零、前言 随着智能安防需求的增长&#xff0c;基于人工智能和物联网的安保系统逐渐成为趋势。树莓派因其低成本、高扩展性等特点&#xff0c;成为很多AI项目的理想平台。本文将为大…

如何在Python爬虫等程序中设置和调用http代理

在Python爬虫中为了更好地绕过反爬机制&#xff0c;获取网页信息&#xff0c;有时可能需要在Python中应用代理服务&#xff0c;这样做的目的就是防止自己的ip被服务器封禁&#xff0c;造成程序运行时中断连接&#xff0c;那么如何在python中设置代理呢&#xff1f; 我们通过几个…

ElasticSearch安装

1.Docker安装 docker run -d --name es7 --restartalways -e ES_JAVA_POTS"-Xms256m -Xmx256m" -e "discovery.typesingle-node" -v /opt/es7/data/:/usr/share/elasticsearch/data -p 9200:9200 -p 9300:9300 registry.cn-beijing.aliyuncs.com/all100…

使用 Cursor 和 Devbox 快速开发并上线 Gin 项目

作为开发者&#xff0c;最让我们头疼的事情是什么&#xff1f;那必须是环境配置、版本控制以及各种部署配置等等繁琐的工作。 想象一下&#xff0c;如果你只需点击几下鼠标&#xff0c;就能拥有一个完全配置好的开发环境&#xff0c;支持从 Java 到 Python&#xff0c;从 Reac…

PHP轻松阅读图书借阅系统小程序源码

&#x1f4da;【学霸秘籍】图书借阅系统&#xff0c;让阅读触手可及&#xff01;&#x1f680;✨ &#x1f4d6; 开篇&#xff1a;告别纸质登记&#xff0c;拥抱智能借阅新时代 你是否还记得&#xff0c;曾经为了借阅一本书&#xff0c;需要在图书馆的登记簿上手动填写复杂的…

js 获取当前时间与前一个月时间

// 获取当前时间的毫秒数 var currentTimeMillis new Date().getTime();// 获取前一个月的Date对象 var dateLastMonth new Date(); dateLastMonth.setMonth(dateLastMonth.getMonth() - 1);// 获取前一个月的毫秒数 var timeMillisLastMonth dateLastMonth.getTime();conso…

sudo apt install jupyter-notebook安装notebook失败E: Aborting install.

问题&#xff1a; sudo apt install jupyter-notebook安装notebook失败E: Aborting install. ~/jie/mywork/PointNetCFD$ sudo apt install jupyter-notebook --fix-missing Reading package lists... Done Building dependency tree Reading state information... Do…

查缺补漏----文件硬连接与软链接(符号链接)

首先回顾一下文件打开的过程&#xff1a; FCB用来存放控制文件需要的各种信息的数据结构&#xff0c;FCB 的有序集合称为文件目录&#xff0c;一个FCB 就是一个文件目录项。 典型的FCB&#xff0c;即一个文件目录项如下&#xff1a; 而UNIX中的目录项如下&#xff0c;每个目录…

为什么选择AWS

在选择云服务提供商时&#xff0c;国内企业面临了不少选择&#xff0c;但亚马逊AWS仍然在许多人心中占据了一席之地。那为什么会选择AWS呢&#xff1f;今天九河云就来带大家一起来探讨一下背后的原因。 1. 全球化的布局与服务优势 AWS的全球化布局和服务网络可以说是它的最大…

到底是谁在初始化内存?—揭开处理器启动过程的奥秘

引言 在嵌入式系统和处理器架构的世界中&#xff0c;内存初始化过程就像一场舞台上的神秘表演。我们知道处理器依赖内存运行应用程序&#xff0c;但它最初如何实现内存的自我启动&#xff1f;在设备开机的那一刻&#xff0c;处理器如何有序地将启动加载程序&#xff08;Bootlo…

【制造业&PPE】安全帽等施工现场安全防护装备识别图像分割系统源码&数据集全套:改进yolo11-DRBNCSPELAN

改进yolo11-DBBNCSPELAN等200全套创新点大全&#xff1a;安全帽等施工现场安全防护装备识别图像分割系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.24 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视…

android——渐变色

1、xml的方式实现渐变色 效果图&#xff1a; xml的代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <shape xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools…