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.rhkb.cn/news/461933.html

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

相关文章

JAVA——网络编程

目录 1.概述 常见的网络架构 2.网络编程三要素 a.ip b.端口 c.协议 3.UDP协议 a.InetAddress类 1.概述 2.实例化对象 b.DatagramSocket类&#xff08;快递公司&#xff09; c.DatagramPacket类&#xff08;包裹&#xff09; d.单播、组播、广播 4.TCP协议 …

完全透彻了解一个asp.net core MVC项目模板1

当我们使用Visual Studio 2022去新建一个基于asp.net core Web项目的时候&#xff0c;一般有三种选择&#xff0c;一种是空项目&#xff0c;一种是基于MVC的项目、再有一种就是基于包含Razor Pages实例的web应用。如下图&#xff1a; 今天&#xff0c;我们打算选择基于MVC模…

在米尔电子MPSOC实现12G SDI视频采集H.265压缩SGMII万兆以太网推流

1. 引言 随着网络视频平台的发展&#xff0c;用户对于4K高清画质的需求日益增长。然而&#xff0c;许多用户发现&#xff0c;即使购买了视频平台的会员&#xff0c;观看4K内容时画质却不如预期&#xff0c;有时甚至还会出现模糊、卡顿的情况。这种现象背后涉及到视频编码、网络…

Matlab数字信号处理——基于改进小波变换的图像去噪方法(7种去噪算法)

1.基于小波变换的阈值收缩法去噪 该方法利用小波变换分离出信号中的噪声成分&#xff0c;并通过设置合适的阈值对小波系数进行收缩&#xff0c;保留主要信息的同时&#xff0c;去除噪声。 %基于小波变换的阈值收缩法去噪算法 clear clc Iimread(nana.png); X im2double(I); …

HTB:Analytics[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many open TCP ports are listening on Analytics? 2.What subdomain is configured to provide a different application on the target web server? 3.What application is running on data.analytical.htb? 4.What version of…

「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解

本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。 关键词 Text 组件Button 组件样式设置事…

05-07实现面向对象领域模型-停车案例

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 源代码地址&#xff1a;https://github.com/ByteBlizzard 本篇文章是讲视频中的3期内容合并为一起。 文章目录 需求模型命令聚合领域事…

如何批量裁剪图片?5个软件帮助你快速进行图片裁剪

如何批量裁剪图片&#xff1f;5个软件帮助你快速进行图片裁剪 批量裁剪图片可以通过多种工具轻松实现&#xff0c;以下5个软件可以帮助你快速裁剪大量图片&#xff1a; 万能图片编辑器 这是一款支持批量图像处理的多功能小工具&#xff0c;功能丰富且界面简单&#xff0c;支持…

vxe-table v4.8+ 与 v3.10+ 虚拟滚动支持动态行高,虚拟渲染更快了

Vxe UI vue vxe-table v4.8 与 v3.10 解决了老版本虚拟滚动不支持动态行高的问题&#xff0c;重构了虚拟渲染&#xff0c;渲染性能大幅提升了&#xff0c;行高自适应和列宽拖动都支持&#xff0c;大幅降低虚拟渲染过程中的滚动白屏&#xff0c;大量数据列表滚动更加流畅。 自适…

期权懂|开通ETF股票期权需要什么条件?ETF股票期权佣金是多少?

期权小懂每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 开通ETF股票期权需要什么条件&#xff1f;ETF股票期权佣金是多少&#xff1f; 一、开通ETF股票期权需满足以下条件&#xff1a; ‌&#xff08;1&#xff09;资金要求‌&#xf…

Lucene的概述与应用场景(1)

文章目录 第1章 Lucene概述1.1 搜索的实现方案1.1.1 传统实现方案1.1.2 Lucene实现方案 1.2 数据查询方法1.1.1 顺序扫描法1.1.2 倒排索引法 1.3 Lucene相关概念1.3.1 文档对象1.3.2 域对象1&#xff09;分词2&#xff09;索引3&#xff09;存储 1.3.3 常用的Field种类 1.4 分词…

在服务器运维过程中,发现服务器时间倒退以及DNS无法解析域名造成yum不可用的问题解决

目录 一.问题描述 二.问题排查过程 2.1yum下载NTP 2.2排查DNS 三.问题解决过程 3.1修复DNS 3.2更新yum源 3.3下载ntp 四.问题解决结果 4.1ntp服务情况检查 4.2服务器时间检查 4.3软件系统时间检查 一.问题描述 对服务器进行运维的过程中&#xff0c;发现服务器时间…

Redis高频面试题

一、Redis有什么好处? 高性能:Redis是一个基于内存的数据存储系统,相比于传统的基于磁盘的数据库系统,它能够提供更高的读写性能。支持丰富的数据类型:Redis支持多种数据结构,包括字符串、哈希、列表、集合、有序集合等,这使得它可以用于多种不同的应用场景。持久化:Re…

[POI2014] PTA-Little Bird(单调队列优化 DP)

luogu 传送门https://www.luogu.com.cn/problem/P3572 解题思路 先设 表示到 的最小劳累值。 很容易得出转移&#xff1a; 其中 由 和 的大小关系决定&#xff0c;并且 。 很显然&#xff0c;直接暴力是 的&#xff0c;会超时。 于是&#xff0c;考虑优化。 我们发现…

如何在Linux系统中使用Apache HTTP Server

如何在Linux系统中使用Apache HTTP Server Apache简介 安装Apache 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动Apache服务 验证Apache是否正在运行 访问Apache默认页面 配置Apache虚拟主机 创建虚拟主机配置文件 示例虚拟主机配置 创建网站根目录 准备静态网站内…

ISME Comm | 西南大学时伟宇团队在功能基因水平揭示植被演替过程中磷限制对土壤微生物碳代谢潜力的抑制作用机制

本文首发于“生态学者”微信公众号&#xff01; 植被群落长期演替过程中&#xff0c;生态系统普遍受养分限制&#xff0c;微生物群落代谢功能在生态系统物质循环中尤为关键。西南大学时伟宇教授团队联合国内外学者&#xff0c;在功能基因水平&#xff0c;将微生物群落功能纳入生…

Unity控制物体透明度的改变

目录标题 效果图代码调用注意事项 效果图 代码 注意&#xff1a;在控制全部的模型进行透视时&#xff0c;已经隐藏的子物体仍然要处理。 using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; public class FadeModel {priva…

工业网络监控中的IP保护与软件授权革新

未来的智能工厂离不开稳定而高效的通信网络&#xff0c;这些网络在支撑生产流程的同时&#xff0c;也面临着复杂的管理与安全挑战。PROCENTEC推出了一系列硬件和软件产品&#xff0c;如Atlas、Mercury和Osiris&#xff0c;以提供全面的网络监控和故障排除能力。然而&#xff0c…

springboot 整合 抖音 移动应用 授权

后端开发&#xff0c;因为没有JavaSDK&#xff0c;maven依赖&#xff0c;用到的是API接口去调用 抖音API开发文档 开发前先申请好移动应用&#xff0c;抖音控制台-移动应用 之后还需要开通所有能开通的能力 拿到应用的 clientKey 和 clientSecret&#xff0c;就可以进入开发了 …

后台管理系统的通用权限解决方案(七)SpringBoot整合SpringEvent实现操作日志记录(基于注解和切面实现)

1 Spring Event框架 除了记录程序运行日志&#xff0c;在实际项目中一般还会记录操作日志&#xff0c;包括操作类型、操作时间、操作员、管理员IP、操作原因等等&#xff08;一般叫审计&#xff09;。 操作日志一般保存在数据库&#xff0c;方便管理员查询。通常的做法在每个…