展开说说provide和inject

写在前面

今天讲一下关于vue组件传值里面的其中一个跨组件传值,之前文章写过一篇关于组件传值,里面也有提过关于这块跨组件传值的方式,其中就提到了provide 和 inject的方式,但是并没有展开说,今天就简单的展开说一下,他的取值问题

讲解思路

今天的思路是,我会写一个demo,里面包含了三个组件,组件之间的关系是层级嵌套,比如一级引入二级,二级引入三级,类似这样的,我们今天是为了说明白一个问题,就是当一个最底层组件使用inject的时候,他的数据源是来自哪一个上级

demo
app.vue
<template><LevelOne></LevelOne>
</template><script setup>import LevelOne from './components/children/LevelOne.vue'	import { provide } from 'vue'provide('content','我是app里面的数据')
</script>
一级组件
<template><LevelTwo></LevelTwo>
</template><script setup>import { provide } from 'vue'import LevelTwo from './LevelTwo.vue'provide('content','我是一级组件的值')
</script>
二级组件
<template><LevelThree></LevelThree>
</template><script setup>import { provide } from 'vue'import LevelThree from './LevelThree.vue'provide('content', '我是二级组件的值')
</script>
三级组件
<template><div>我是三级组件,我获取的内容是:{{content}}</div>
</template><script setup>import { ref,inject } from 'vue'const content = ref()content.value = inject('content')
</script>
输出结果
我是三级组件,我获取的内容是:我是二级组件的值

如果我直接将二级组件里面的提供者去掉:

<template><LevelThree></LevelThree>
</template><script setup>import LevelThree from './LevelThree.vue'
</script>
输出结果
我是三级组件,我获取的内容是:我是一级组件的值
结论

由上面的例子我们可以看出了,当底层组件的上级有很多同样的提供者的时候,他的原则是就近获取,今天的目的也是为了说明这个问题,因为之前那篇文章只是说了一下vue 提供了这个方法,但是并没有展开说他的使用规则。

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

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

相关文章

CRM的定义、功能,以及国内外CRM系统排名

什么是客户关系管理? CRM是(客户关系管理)的缩写&#xff0c;是一个管理与客户关系的系统。CRM的主要功能是管理基本客户信息和购买历史的客户管理、分析潜在客户和新客户的客户分析、对询问的自动回复的响应以及通过电子邮件通讯和研讨会吸引客户。它是加强和维护与客户和潜…

opencv#30 线性滤波

均值滤波原理 均值滤波步骤 Step1:求和。 Step2:计算平均值。 所谓均值滤波&#xff0c;就是求平均值的意思。我们假设在一个3*3的范围内有一个图像&#xff0c;其中这个图像每一个像素可能含有噪声&#xff0c;也可能不含噪声&#xff0c;我们是不知道的&#xff0c;因此通…

持续集成工具Jenkins的使用之配置篇(二)

上一篇 &#xff1a;持续集成工具Jenkins的安装配置之安装篇(一)-CSDN博客 接上文 三.Jenkins配置 Jenkins配置主要是针对创建构建任务前做的一些基本配置&#xff0c;这些配置有些是必须的&#xff0c;有些是可以帮我们提高效率的&#xff0c;总之都是Jenkins管理员都要会的…

论文阅读笔记整理(持续更新)

KV存储 ROLEX: A Scalable RDMA-oriented Learned Key-Value Store for Disaggregated Memory Systems FAST 2023 Paper 泛读笔记 针对分离式内存系统中&#xff0c;KV存储性能不高的问题&#xff0c;由于内存节点资源有限&#xff0c;现有方法难以直接修改B树或学习索引的模…

从物联网看智慧文旅的未来:技术与实践的完美结合,重塑旅游体验的新篇章

一、物联网技术&#xff1a;智慧文旅的基石 随着科技的飞速发展&#xff0c;物联网技术已经深入到我们生活的方方面面&#xff0c;尤其在智慧文旅领域&#xff0c;物联网技术更是起到了不可或缺的作用。它如同智慧文旅的基石&#xff0c;为旅游行业带来了前所未有的创新和变革…

VRRP6协议--负载均衡配置

VRRP6负载均衡 VRRP6负载均衡指的是创建多个备份组,多个备份组同时承担数据转发的任务,对于每一个备份组,都有自己的Master和若干Backup设备。 VRRP6负载分担与VRRP6主备备份的基本原理和报文协商过程都是相同的。同样对于每一个VRRP6备份组,都包含一个Master设备和若干Ba…

统计中集中趋势的衡量标准

一、说明 统计中的中心趋势是用于表示大量数值数据的中间值或中心值的数值。这些获得的数值在统计学中称为中心值或平均值。 任何统计数据或序列的中心值或平均值是代表整个数据或其相关频率分布的变量的值。这样的值具有重要意义&#xff0c;因为它描绘了整个数据的性质或特征…

针对特定领域较小的语言模型是否与较大的模型同样有效?

经过2023年的发展&#xff0c;大语言模型展示出了非常大的潜力&#xff0c;训练越来越大的模型成为有效性评估的一个关键指标&#xff0c;论文《A Comparative Analysis of Fine-Tuned LLMs and Few-Shot Learning of LLMs for Financial Sentiment Analysis》中&#xff0c;作…

阿里云 SAE 2.0 正式商用:极简易用、百毫秒弹性效率,降本 40%

作者&#xff1a;黛忻 本文主要介绍阿里云 Serverless 应用引擎&#xff08;以下简称 SAE &#xff09;如何帮助企业跨越技术鸿沟&#xff0c;从传统应用架构无感升级到 Serverless 架构&#xff0c;以更高效、更经济的方式进行转型&#xff0c;快速进入云原生快车道&#xff0…

河北大学数学模型

2023-2024 简答题 一 简述数学建模的基本方法 二 以人口模型为例&#xff0c;说明什么事模型检验和预测以及基本过程 三 什么是多目标规划&#xff0c;处理这类规划问题的基本方法有哪些&#xff1f; 四 简述什么是指派问题 五 在汽车生产模型中&#xff0c;有约束条件x1…

【Android】TypedArray的使用

介绍 看电池电量组件BatteryMeterView的时候看到的。 Array是个数组&#xff0c;所有TypedArray也是个容器&#xff0c;基本是用于自定义View里面的&#xff08;至少我目前见过的全部都在自定义View里面&#xff09;。 使用 1.自定义View public class RoundSeekbarView e…

【深度学习】BasicSR训练过程记录,如何使用BasicSR训练GAN

文章目录 两种灵活的使用场景项目结构概览简化的使用方式 项目结构解读1. 代码的入口和训练的准备工作2. data和model的创建2.1 dataloader创建2.2 model的创建 3. 训练过程 动态实例化的历史演进1. If-else判断2. 动态实例化3. REGISTER注册机制 REGISTER注册机制的实现1. DAT…

嵌入式基础知识-测试基础概念

本篇来介绍嵌入式项目开发中&#xff0c;软件测试的相关基础知识。 1 测试基础知识 测试是指&#xff1a;在规定的条件下对程序进行操作&#xff0c;以发现错误&#xff0c;对软件质量进行评估 测试的对象包括程序、数据和文档 对于测试&#xff0c;并不是只有测试人员才需…

读AI3.0笔记04_视觉识别

1. 两次飞跃 1.1. ConvNets是当今计算机视觉领域深度学习革命的驱动力 1.1.1. 20世纪80年代便由法国计算机科学家杨立昆提出&#xff0c;而他则是受到了福岛邦彦提出的神经认知机&#xff08;Neocognitron&#xff09;的启发 1.2. ImageNet竞赛被看作计算机视觉和人工智能进…

Docker 配置 Gitea + Drone 搭建 CI/CD 平台

Docker 配置 Gitea Drone 搭建 CI/CD 平台 配置 Gitea 服务器来管理项目版本 本文的IP地址是为了方便理解随便打的&#xff0c;不要乱点 首先使用 docker 搭建 Gitea 服务器&#xff0c;用于管理代码版本&#xff0c;数据库选择mysql Gitea 服务器的 docker-compose.yml 配…

Kubernetes(K8S)拉取本地镜像部署Pod 实现类似函数/微服务功能(可设置参数并实时调用)

以两数相加求和为例&#xff0c;在kubernetes集群拉取本地的镜像&#xff0c;实现如下效果&#xff1a; 1.实现两数相加求和 2.可以通过curl实时调用&#xff0c;参数以GET方式提供&#xff0c;并得到结果。&#xff08;类似调用函数&#xff09; 一、实现思路 需要准备如下的…

分布式websocket IM聊天系统相关问题问答【第九期】

前言 上期视频讲解了自己关于聊天系统的设计的时候出现了一些不一样的声音。不了解情况的可以看上上期视频。这期主要是讨论。IM聊天系统设计方案多。我的先说明一下自己的技术背景互相之间才能更好的理解。 本期对应视频 目前已经写的文章有。并且有对应视频版本。 git项目地…

FPGA中跨时钟域传数据——(1)单bit脉冲

FPGA中跨时钟域传数据——&#xff08;1&#xff09;单bit脉冲 亚稳态模型由快时钟传到慢时钟由慢时钟传到快时钟 亚稳态模型 必须在建立时间和保持时间内&#xff0c;数据不变化&#xff0c;否则会产生亚稳态。 由快时钟传到慢时钟 在快时钟里面进行数据展宽&#xff08;…

Redis(六)发布订阅,不推荐

文章目录 了解即可注意点 了解即可 是一种消息通信模式:发送者(PUBLISH)发送消息&#xff0c;订阅者(SUBSCRIBE)接收消息&#xff0c;可以实现进程间的消息传递 Redis可以实现消息中间件MQ的功能&#xff0c;通过发布订阅实现消息的引导和分流。仅代表我个人&#xff0c;不推荐…

牛客周赛 Round 20 解题报告 | 珂学家 | 状压DP/矩阵幂优化 + 前缀和的前缀和

前言 整体评价 这场比赛很特别&#xff0c;是牛客周赛的第20场&#xff0c;后两题难度直线飙升了。 前四题相对简单&#xff0c;E题是道状压题&#xff0c;历来状压题都难&#xff0c;F题压轴难题了&#xff0c;感觉学到了不少。 A. 赝品 先求的最大值 然后统计非最大值的个…