vue3中跨层传递provide、inject

news2024/12/25 10:00:26

前置说明

  在 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.coloradmin.cn/o/2231412.html

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

相关文章

Zig 语言通用代码生成器:逻辑,发布冒烟测试版二之二

Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;发布冒烟测试版二之二 Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;已发布冒烟测试版二。此版本完善了代码生成物。支持多对多关系。修复了所有单域动词。并有更多缺陷修复。暂时不支持图片类型。暂时不支持日期和…

获取Hive表备注

DESCRIBE EXTENDED 表名;先获取Detailed Table Information这行的data_type字段数据&#xff0c;进行正则匹配&#xff0c;拿到表备注&#xff0c;如下&#xff1a; String str ReUtil.get("parameters:\\{(?!.*?\\().*transient_lastDdlTime.*?comment(.*?)\\}&quo…

前端请求后端接口报错(blocked:mixed-content),以及解决办法

报错原因&#xff1a;被浏览器拦截了&#xff0c;因为接口地址不是https的。 什么是混合内容&#xff08;Mixed Content&#xff09; 混合内容是指在同一页面中同时包含安全&#xff08;HTTPS&#xff09;和非安全&#xff08;HTTP&#xff09;资源的情况。当浏览器试图加载非…

TCP是怎样工作的网络拥塞控制理论和算法部分记录

参考资料 https://github.com/ituring/tcp-book 流量控制、窗口控制和拥塞控制的关系 流量控制、窗口控制和拥塞控制的关系如图所示 窗口控制是上层的概念&#xff0c;核心思路是基于滑动窗口技术传输数据。而确定发送窗口大小的方法有流量控制和拥塞控制两种 流量控制&…

python eval() 怎么用

eval函数的使用方法 函数的作用&#xff1a; 计算指定表达式的值。也就是说它要执行的Python代码只能是单个运算表达式&#xff08;注意eval不支持任意形式的赋值操作&#xff09;&#xff0c;而不能是复杂的代码逻辑&#xff0c;这一点和lambda表达式比较相似。 函数定义&a…

WPF+MVVM案例实战(十二)- 3D数字翻牌计时实现

文章目录 1、运行效果2、功能实现1、文件创建2、控件代码实现3、控件引用与菜单实现1.引用用户控件2.按钮菜单3、计时器界面实现4、源代码获取1、运行效果 3D数字翻牌计时 2、功能实现 1、文件创建 打开项目 Wpf_Examples ,在用户控件 UserControlLib 中创建 NumberFoldi…

Redis 下载安装(Windows11)

目录 Redis工具下载安装 Redis 工具 系统&#xff1a;Windows 11 下载 Windows版本安装包&#xff1a;通过百度网盘分享的文件&#xff1a;Redis-x64-3.0.504.msi 链接&#xff1a;https://pan.baidu.com/s/1qxq0AZJe5bXeCPzm1-RBCg?pwdc14j 提取码&#xff1a;c14j 安装…

ArcGIS软件之“新建中学最适合地址”地图制作

目录 最终效果图(全文图中的颜色类似即可&#xff0c;形状一样为标准&#xff09;第一步、设置现有中学的欧式距离第二步、将计算好的欧式距离 进行重分类第三步、进行核密度分析第四步、进行人口密度的重分类第五步、进行土地使用的要素转栅格第六步、对上一步进行重分类第七步…

K 临近算法

机器学习中的 K 临近算法&#xff0c;计算输入数据与训练集中数据的距离&#xff0c;选取 k 个最近的数据&#xff0c;选中的数据中&#xff0c;那个分类多&#xff0c;那个分类就是最终结果。特征空间的距离有多重测量方法&#xff0c;最常用的就是欧氏距离&#xff0c;公式如…

聪明的你能从千门八将108局学到什么,对你的未来人生有哪些深远的影响?

千门八将108局&#xff1a;智慧的启迪与人生指引 在古老智慧的宝库中&#xff0c;千门八将108局犹如璀璨星辰&#xff0c;闪耀着神秘而深邃的光芒。那些认真钻研过这些局的人&#xff0c;仿佛经历了一场穿越时空的智慧洗礼&#xff0c;从中收获了无价的人生财富。 一、从千门八…

【前端】CSS知识梳理

基础&#xff1a;标签选择器、类选择器、id选择器和通配符选择器 font:font-style(normal) font-weight(400) font-size(16px) /line-height(0) font-family(宋体&#xff09; 复合&#xff1a; 后代选择器&#xff08; &#xff09;、子选择器&#xff08;>)、并集选择器(…

JAVA 插入 JSON 对象到 PostgreSQL

博主主页:【南鸢1.0】 本文专栏&#xff1a;JAVA 目录 ​编辑 简介 所用&#xff1a; 1、 确保 PostgreSQL 数据库支持 JSON&#xff1a; 2、添加 PostgreSQL JDBC 驱动 3、安装和运行 PostgreSQL 4、建立数据库的连接 简介 在现代软件开发中&#xff0c;由于 JSON 数据…

都快2025年了,来看看哪个编程语言才是时下热门吧

早上好啊&#xff0c;大佬们&#xff0c;今天咱们不讲知识&#xff0c;今天我们来看看时下热门的编程语言都是哪些&#xff0c;大佬们又都是在学哪些语言呢。 最近一些朋友和我在讨论哪个编程语言是现在 最好用 最厉害 的编程语言。 有人说&#xff0c;Python简单好用&#xf…

GraphQL 与 Elasticsearch 相遇:使用 Hasura DDN 构建可扩展、支持 AI 的应用程序

作者&#xff1a;来自 Elastic Praveen Durairaju GraphQL 提供了一种高效且灵活的数据查询方式。本博客将解释 Hasura DDN 如何与 Elasticsearch 配合使用&#xff0c;以实现高性能和元数据驱动的数据访问。 此示例的代码和设置可在此 GitHub 存储库 - elasticsearch-subgraph…

.bixi勒索病毒来袭:如何防止文件加密与数据丢失?

导言 在网络威胁剧烈的今天&#xff0c;勒索病毒已成为企业和个人面临的重大安全挑战&#xff0c;其中虫洞勒索病毒习得高强度的加密手段和急剧传播的特性引起关注。一旦感染&#xff0c;就会加密关键数据并索要赎金&#xff0c;导致数据无法访问并带来巨大的财务损失。更为严…

Mac 配置SourceTree集成云效

1、背景 工作使用的是自己的笔记本&#xff0c;一个是比较卡&#xff0c;在一个是敏感信息比较多还是使用公司的电脑&#xff0c;但是系统是Mac就很麻烦&#xff0c;在网上找了帖子记录一下 2、配置 打开终端 ssh-keygen -t rsa #一直回车就行 cd .ssh cat id_rsa.pub #查…

如何选择适合自己的 Python IDE

集成开发环境&#xff08;IDE&#xff09;是指提供广泛软件开发能力的软件应用程序。IDE 通常包括源代码编辑器、构建自动化工具和调试器。大多数现代 IDE 都配备了智能代码补全功能。在本文中&#xff0c;你将发现目前市场上最好的 Python IDE。 什么是 IDE&#xff1f; IDE…

Javase——正则表达式

正则表达式的相关使用 public static void main(String[] args) {//校验QQ号 System.out.println("3602222222".matches("[1-9][0-9]{4,}"));// 校验18位身份证号 System.out.println("11050220240830901X".matches("^([0-9]){7,18}…

如何在 Ubuntu 上安装和配置 GitLab

简介 GitLab是一个开源应用程序&#xff0c;主要用于托管 Git 仓库&#xff0c;并提供与开发相关的附加功能&#xff08;如问题跟踪&#xff09;。GitLab 可由用户自己的基础架构托管&#xff0c;可灵活部署为开发团队的内部存储库、与用户对接的公共方式或供稿者托管自己项目…

Windows部署rabbitmq

本次安装环境&#xff1a; 系统&#xff1a;Windows 11 软件建议版本&#xff1a; erlang OPT 26.0.2rabbitmq 3.12.4 一、下载 1.1 下载erlang 官网下载地址&#xff1a; 1.2 下载rabbitmq 官网下载地址&#xff1a; 建议使用解压版&#xff0c;安装版可能会在安装软件…