【vue】provide/inject

provide/ inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

通途点来讲可以用来实现隔代传值,传统的props只能父传子,而 provide/ inject无论子组件有多深,只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,这就是它最大的特性。

一、基本语法

provide选项:一个对象或返回一个对象的函数
inject选项:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名

二、代码示例

1、定义一个parent component

<template><div><childOne></childOne></div>
</template><script>import childOne from '../components/test/ChildOne'export default {name: "Parent",provide: {for: "demo"},components:{childOne}}</script>

在这里我们在父组件中provide for这个变量。

2、定义一个子组件

<template><div>{{demo}}<childtwo></childtwo></div>
</template><script>import childtwo from './ChildTwo'export default {name: "childOne",inject: ['for'],data() {return {demo: this.for}},components: {childtwo}}
</script>

3、定义另一个子组件

<template><div>{{demo}}</div>
</template><script>export default {name: "",inject: ['for'],data() {return {demo: this.for}}}
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for,并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

三、总结

provide/inject使用缺点也很明显,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用。

provide和inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

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

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

相关文章

1.QT简介(介绍、安装,项目创建等)

1. QT介绍 Qt&#xff08;官方发音 [kju:t]&#xff09;是一个跨平台的C开发库&#xff0c;主要用来开发图形用户界面&#xff08;Graphical User Interface&#xff0c;GUI&#xff09;程序 Qt 是纯 C 开发的&#xff0c;正常情况下需要先学习C语言、然后在学习C然后才能使用…

Linux--shell编程中内部表和外部表之间的转换

内部表和外部表之间的转换 1、查询表的类型 desc formatted student; Table Type: MANAGED_TABLE 2、修改内部表student为外部表 alter table student set tblproperties(EXTERNALTRUE); 3、查询表的类型 desc formatted student; Table Type: EXT…

Scrapy爬虫开发流程全解析

Scrapy是一个快速、高层次的Web爬取框架&#xff0c;用于抓取网页并从中提取结构化的数据。使用Scrapy&#xff0c;您可以轻松地创建复杂的爬虫&#xff08;spiders&#xff09;&#xff0c;用于广泛的用例。本篇博客将引导您完成Scrapy爬虫的开发流程&#xff0c;并提供代码案…

产品化Chatgpt所面临的五大技术挑战

2022年11月&#xff0c;ChatGPT横扫全球&#xff0c;成为应用人工智能&#xff08;AI&#xff09;领域迄今为止最令人惊叹的“哇&#xff01;”时刻&#xff0c;也是当前科技投资激增的催化剂。2023年11月&#xff0c;首席执行官Sam Altman宣布该产品周用户量达到1亿&#xff0…

神经网络系列---归一化

文章目录 归一化批量归一化预测阶段 测试阶段γ和β&#xff08;注意&#xff09;举例 层归一化前向传播反向传播 归一化 批量归一化 &#xff08;Batch Normalization&#xff09;在训练过程中的数学公式可以概括如下&#xff1a; 给定一个小批量数据 B { x 1 , x 2 , … …

GPT技术在学术研究中的革命性应用:开启论文创作新篇章

在学术界&#xff0c;撰写高质量的论文一直是一个挑战性的任务&#xff0c;它不仅需要深厚的专业知识&#xff0c;还要求良好的文献综述能力、数据分析技巧以及清晰的表达能力。近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;尤其是生成式预训练变换器&#xff08;…

《隐私计算简易速速上手小册》第8章:隐私计算对机器学习和 AI 的影响(2024 最新版)

文章目录 8.1 机器学习中的隐私问题8.1.1 基础知识8.1.2 主要案例:使用差分隐私的机器学习8.1.3 拓展案例 1:基于隐私的数据聚合8.1.4 拓展案例 2:保护隐私的推荐系统8.2 使用隐私计算加强 AI 安全8.2.1 基础知识8.2.2 主要案例:使用同态加密的数据分析8.2.3 拓展案例 1:安…

134 Linux 系统编程11 ,readlink命令,文件目录rwx权限差异,目录操作函数

一 readlink 命令 前面知道&#xff0c;如果a.soft是一个软链接&#xff0c;我们使用 cat a.soft,会直接查看这个软链接指向的文件 那么我们就是想看这个软链接是啥&#xff0c;可以使用 readlink a.soft 二 获取工作目录 getcwd函数 获取进程当前工作目录 (卷3&#xff0c;标…

简单封装axios

目录 一、代码解读二、整体代码 一、代码解读 import axios from ‘axios’; 创建一个名为 instance 的 Axios 实例&#xff0c;配置默认的请求地址和超时时间 const instance axios.create({baseURL: http://localhost:8085,timeout: 5000, });请求拦截器&#xff0c;用于…

camunda源代码编译运行(一):下载编译camunda源代码

使用camunda开源工作流引擎有多种方式&#xff0c;包括&#xff1a;通过docker运行、使用springboot集成、部署camunda发行包、基于源代码编译运行等多种方式&#xff0c;其中&#xff0c;通过源代码编译集成整合方式&#xff0c;是最复杂的一种方式&#xff0c;文本重点介绍如…

ES坑-创建索引使用_下划线-黑马旅游搜不到

学ES的时候&#xff0c;星级过滤无效 找不到数据。 需要 但是我们在创建的时候使用的是keyword 通过研究发现&#xff0c;我们导入数据的时候应该默认的为starName 我get库时候发现有2个字段 所以通过star_name搜索因为都是空数据搜不到&#xff0c;而starName类型为text所以…

第二十五章 : Springboot使用velocity模板引擎

第二十五章 : Springboot使用velocity模板引擎 前言 本章知识点: Velocity 是什么、Velocity引擎是如何进行模板加载、适用场景有哪些、资源加载器的类型、以及Velocity 在代码生成场景中的应用。 Springboot 版本 2.3.2.RELEASE ,xxl-job-core 2.4.0Velocity 是什么? V…

绘图机器(C 语言)

题目来自于博主算法大师的专栏&#xff1a;最新华为OD机试C卷AB卷OJ&#xff08;CJavaJSPy&#xff09; https://blog.csdn.net/banxia_frontend/category_12225173.html 题目 绘图机器的绘图笔初始位置在原点(0,0) 机器启动后按照以下规则来进行绘制直线 尝试沿着横线坐标正…

专注力训练游戏-第15届蓝桥第4次STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第171讲。 第15届蓝桥杯第4次STEMA测评已于2024年1月28日落下帷幕&#xff0c;编程题一共有6题&#xff0c;分别如下&a…

fpga_硬件加速引擎

一 什么是硬件加速引擎 硬件加速引擎&#xff0c;也称硬件加速器&#xff0c;是一种采用专用加速芯片/模块替代cpu完成复杂耗时的大算力操作&#xff0c;其过程不需要或者仅需要少量cpu参与。 二 典型的硬件加速引擎 典型的硬件加速引擎有GPU&#xff0c;DSP&#xff0c;ISP&a…

【C++】类和对象之拷贝构造函数篇

个人主页 &#xff1a; zxctscl 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 传值传参和传引用传参3. 概念4. 特征 1. 前言 在前面学习了6个默认成员函数中的构造函数和析构函数 【C】构造函数和析构函数详解&#xff0c;接下来继续往后看拷…

Sora领航AIGC时代:深度解读行业变革与AI工具全景图

随着人工智能技术的飞速发展&#xff0c;越来越多的企业和行业开始将AI融入其核心业务流程中。在这个背景下&#xff0c;Sora以其独特的视角和全面的解决方案&#xff0c;正引领着AIGC&#xff08;人工智能生成内容&#xff09;的趋势变革。 本文将对Sora进行深度解读&#xf…

「优选算法刷题」:斐波那契数(两种解法)

一、题目 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0c;其中 n > …

web通用脚手架2

web通用脚手架2 这个模板的基本架构和1是一样的&#xff0c;唯一的一点区别就是在设计上进行了优化。 因为在一盘的场景下&#xff0c;配置文件其实并不好读取&#xff0c;不如结构体要好读&#xff0c;于是这里进行的优化就是&#xff0c;将配置文件里面的配置项全部改成用结…

Vue3(pinia) 整合 SpringWebsocket链接url动态传参

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;java专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…