vue3中跨层传递provide、inject
前置说明
在 Vue 3 中,provide 和 inject 是一对用于跨组件树传递数据的 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,确保它们的键名不会冲突,否则可能会导致意外的行为。
总结:
- provide和inject的作用是什么?跨层组件通信
- 如何在传递的过程中保持数据响应式?第二个参数传递ref对象
- 底层组件想要通知顶层组件做修改,如何做?传递方法,底层组件调用方法
- 一颗组件树中只有一个顶层或底层组件吗?相对概念,存在多个顶层和顶层的关系
相关文章:
vue3中跨层传递provide、inject
前置说明 在 Vue 3 中,provide 和 inject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务,然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据,而不需要…...
Nacos-1.4.6升级2.3.2
一、nacos-2.3.2部署(非升级测试步骤) 1、使用nginx进行代理 # nginx-1.25.5 docker run -d --name nginx-nacos --network nacos --privilegedtrue -v /data/nacos/nginx.conf:/etc/nginx/conf.d/default.conf -p 8848:8848 nginx:latest2、创建nacos服务 # nacos-2.3.2 do…...
东识集中文印管理系统|DW-S408系统的主要功能
集中文印管理系统以涉密文件集中管理为目标,实现办公文件汇总、打印信息生成、文件打印、文件追溯等功能,将用户与打印设备分离,有效防止纸媒泄密。 集中文印管理系统是由客户端和服务端两部分构成,客户端能够将打印文件上传至服…...
text-foreground讲解
1、fore单词讲解 fore 是 “forward” 或 “front” 的简写,意思是"前面的"、“前景的”。 一些常见的相关英文词: foreground fore ground,意思是"前景" background back ground,意思是"背景&qu…...
数字IC后端实现之Innovus Place跑完density爆涨案例分析
下图所示为咱们社区a7core后端训练营学员的floorplan。 数字IC后端实现 | Innovus各个阶段常用命令汇总 该学员跑placement前density是59.467%,但跑完place后density飙升到87.68%。 仔细查看place过程中的log就可以发现Density一路飙升! 数字IC后端物…...
【牛客刷题实战】二叉树遍历
大家好,我是小卡皮巴拉 文章目录 目录 牛客题目: 二叉树遍历 题目描述 输入描述: 输出描述: 示例1 解题思路 问题理解 算法选择 具体思路 解题要点 完整代码(C语言) 兄弟们共勉 !&…...
消息队列mq有哪些缺点?
大家好,我是锋哥。今天分享关于【消息队列mq有哪些缺点?】面试题?希望对大家有帮助; 消息队列mq有哪些缺点? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 消息队列(MQ)的缺点 消…...
【CENet】多模态情感分析的跨模态增强网络
在MSA领域,文本的准确度远远高于音频和视觉,如果文本能达到90%,那么音频和视觉的准确度只有60%~80%,但是过往研究很少针对情感分析的背景下去提高音频和视频的准确度。 abstract: 多模态情感分析(MSA&…...
动态代理:面向接口编程,屏蔽RPC处理过程
RPC远程调用 使用 RPC 时,一般的做法是先找服务提供方要接口,通过 Maven把接口依赖到项目中。在编写业务逻辑的时候,如果要调用提供方的接口,只需要通过依赖注入的方式把接口注入到项目中,然后在代码里面直接调用接口…...
HTTP 405 Method Not Allowed:解析与解决
HTTP 405 Method Not Allowed:解析与解决 引言 在Web开发中,HTTP状态码是服务器与客户端之间通信的重要组成部分。当我们使用Python进行网络请求时,经常会遇到各种HTTP状态码。其中,HTTP 405 “Method Not Allowed” 错误是一个…...
推荐一款CAD/CAM设计辅助工具:Mastercam
Mastercam是一款非常好用的软件,我们的这款软件是由美国CNC软件公司开发,集平面制图、三维设计、曲面设计、数 控编程、刀具处理等多项强大功能于一体。软件的使用过程具有非常直观的特点,用户可以很方便地对自己的作品进行设计。 Mastercam不…...
位运算刷题记录
1. 使两个整数相等的位更改次数 3226. 使两个整数相等的位更改次数 给你两个正整数 n 和 k。 你可以选择 n 的 二进制表示 中任意一个值为 1 的位,并将其改为 0。 返回使得 n 等于 k 所需要的更改次数。如果无法实现,返回 -1。 class Solution {pub…...
爬虫技术——小白入狱案例
知孤云出岫 目录 1. 案例概述2. 案例需求分析3. 实现步骤Step 1: 环境准备Step 2: 分析百度图片URL请求规律Step 3: 编写爬虫代码代码解析 4. 运行代码5. 注意事项6. 案例总结 要实现大批量爬取百度图片,可以使用Python编写一个网络爬虫,通过发送HTTP请求…...
vue 果蔬识别系统百度AI识别vue+springboot java开发、elementui+ echarts+ vant开发
编号:R03-果蔬识别系统 简介:vuespringboot百度AI实现的果蔬识别系统 版本:2025版 视频介绍: vuespringboot百度AI实现的果蔬识别系统前后端java开发,百度识别,带H5移动端,mysql数据库可视化 1 …...
全新更新!Fastreport.NET 2025.1版本发布,提升报告开发体验
在.NET 2025.1版本中,我们带来了巨大的期待功能,进一步简化了报告模板的开发过程。新功能包括通过添加链接报告页面、异步报告准备、HTML段落旋转、代码文本编辑器中的文本搜索、WebReport图像导出等,大幅提升用户体验。 FastReport .NET 是…...
信息学科平台系统设计与实现:Spring Boot技术手册
5系统详细实现 5.1 用户信息管理 基于保密信息学科平台系统的系统管理员可以对用户信息查询。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.2 教师信息管理 管理员可以对教师信息进行查下和删除。具体界面如图5.2所示。 图5.2 教师信息界面 5.3 学科动态管理 管理…...
conda下jupyterlab安装问题以及交互绘图问题记录
安装 1. 直接conda install jupyterlab就好,只要在base环境下安装就行,可以在任意环境下执行jupyter lab启动。 2. 打开jupyter lab后显示Could not determine jupyterlab build status without nodejs,可以执行conda install nodejs安装no…...
尚硅谷react教程_扩展_setState更新状态的2种写法
1.setState setState更新状态的2种写法(1).setState(stateChange,[callback])----对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改)2.callback是可选的回调函数,它在状态更新完毕、界面也更新…...
C语言编写的自动取款机模拟程序
#include〈stdio。h> #include<string。h> #include <stdio.h> #include〈stdlib.h〉 #include〈direct.h〉 #include<io.h> #include 〈errno。h> /********************************************************…...
【常用数据结构】开发中常用的数据结构?
开发中常用的数据结构包括数组、链表、栈、队列、树、图、堆和散列表(哈希表)。这些数据结构在软件开发中有着广泛的应用,并且各自具有独特的特点和用途。 数组 数组是最基本的数据结构之一,用于在内存中连续存储多个元素。数…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
