Vue依赖注入,详细解析

Prop 逐级透传问题​

通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:

Prop 逐级透传的过程图示

注意,虽然这里的 <Footer> 组件可能根本不关心这些 props,但为了使 <DeepChild> 能访问到它们,仍然需要定义并向下传递。如果组件链路非常长,可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”,显然是我们希望尽量避免的情况。

provide 和 inject 可以帮助我们解决这一问题 [1]。一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

Provide/inject 模式

Provide (提供)​

要为组件后代提供数据,需要使用到 provide 选项:

export default {provide: {message: 'hello!'}
}

对于 provide 对象上的每一个属性,后代组件会用其 key 为注入名查找期望注入的值,属性的值就是要提供的数据。

如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性),那么可以以函数形式使用 provide

export default {data() {return {message: 'hello!'}},provide() {// 使用函数的形式,可以访问到 `this`return {message: this.message}}
}

然而,请注意这不会使注入保持响应性。我们会在后续小节中讨论如何让注入转变为响应式。

应用层 Provide​

除了在一个组件中提供依赖,我们还可以在整个应用层面提供依赖:

import { createApp } from 'vue'const app = createApp({})app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用,因为插件一般都不会使用组件形式来提供值。

Inject (注入)​

要注入上层组件提供的数据,需使用 inject 选项来声明:

export default {inject: ['message'],created() {console.log(this.message) // injected value}
}

注入会在组件自身的状态之前被解析,因此你可以在 data() 中访问到注入的属性:

export default {inject: ['message'],data() {return {// 基于注入值的初始数据fullMessage: this.message}}
}

注入别名​

当以数组形式使用 inject,注入的属性会以同名的 key 暴露到组件实例上。在上面的例子中,提供的属性名为 "message",注入后以 this.message 的形式暴露。访问的本地属性名和注入名是相同的。

如果我们想要用一个不同的本地属性名注入该属性,我们需要在 inject 选项的属性上使用对象的形式:

export default {inject: {/* 本地属性名 */ localMessage: {from: /* 注入来源名 */ 'message'}}
}

这里,组件本地化了原注入名 "message" 所提供的属性,并将其暴露为 this.localMessage

注入默认值​

默认情况下,inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供,则会抛出一个运行时警告。

如果在注入一个值时不要求必须有提供者,那么我们应该声明一个默认值,和 props 类似:

export default {// 当声明注入的默认值时// 必须使用对象形式inject: {message: {from: 'message', // 当与原注入名同名时,这个属性是可选的default: 'default value'},user: {// 对于非基础类型数据,如果创建开销比较大,或是需要确保每个组件实例// 需要独立数据的,请使用工厂函数default: () => ({ name: 'John' })}}
}

和响应式数据配合使用​

为保证注入方和供给方之间的响应性链接,我们需要使用 computed() 函数提供一个计算属性:

import { computed } from 'vue'export default {data() {return {message: 'hello!'}},provide() {return {// 显式提供一个计算属性message: computed(() => this.message)}}
}

computed() 函数常用于组合式 API 风格的组件中,但它同样还可以用于补充选项式 API 风格的某些用例

使用 Symbol 作注入名​

至此,我们已经了解了如何使用字符串作为注入名。但如果你正在构建大型的应用,包含非常多的依赖提供,或者你正在编写提供给其他开发者使用的组件库,建议最好使用 Symbol 来作为注入名以避免潜在的冲突。

我们通常推荐在一个单独的文件中导出这些注入名 Symbol:

// keys.js
export const myInjectionKey = Symbol()
// 在供给方组件中
import { myInjectionKey } from './keys.js'export default {provide() {return {[myInjectionKey]: {/* 要提供的数据 */}}}
}
// 注入方组件
import { myInjectionKey } from './keys.js'export default {inject: {injected: { from: myInjectionKey }}
}

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

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

相关文章

各类聚类算法整理

各类聚类算法整理 0. 先验的基础知识1. K-Means2. GMM3. EM算法4.Spectral Clustering5. Mean Shift6. DBSCAN 本篇将介绍整理各种聚类算法&#xff0c;包括k-means&#xff0c;GMM(Guassian Mixture Models, 高斯混合)&#xff0c;EM(Expectation Maximization&#xff0c;期望…

C#基础知识总结

C语言、C和C#的区别 ✔ 面向对象编程&#xff08;OOP&#xff09;&#xff1a; C 是一种过程化的编程语言&#xff0c;它不直接支持面向对象编程。然而&#xff0c;C 是一种支持 OOP 的 C 的超集&#xff0c;它引入了类、对象、继承、多态等概念。C# 是完全面向对象的&#xff…

第十七题:串的处理(通过率80%)

题目描述 在实际的开发工作中&#xff0c;对字符串的处理是最常见的编程任务。本题目即是要求程序对用户输入的串进行处理。具体规则如下&#xff1a; 把每个单词的首字母变为大写。 把数字与字母之间用下划线字符&#xff08;_&#xff09;分开&#xff0c;使得更清晰 把单…

TCP三次握手过程及抓包分析

TCP三次握手过程 一、TCP分段格式二、TCP三次握手三、Wireshark抓包分析 一、TCP分段格式 二、TCP三次握手 三、Wireshark抓包分析

用O(1)时间复杂度实现bitset()函数

gcc有一个高效的位操作指令__builtin_ctz&#xff0c;它可以O(1)的时间代价获取8字节整数低位连续0的个数&#xff0c;比如&#xff1a; __builtin_ctz(1&#xff09; 0, (1) __builtin_ctz(2) 1, (10) __builtin_ctz(4) 2, (100) __builtin_ctz(6) 1, (110) 请基于该指令实…

JDK安全剖析之术语与定义

1.验证&#xff08;Authentication&#xff09; 确认通信对方身份的过程。 2.证书&#xff08;Certificate&#xff09; 一份数字签名声明&#xff0c;用于证明某个实体&#xff08;个人、公司等&#xff09;的身份和公钥。证书可以是自签名的&#xff0c;也可以是由证书颁发…

VTK使用交互器来从三维体数据中提取二维切片

VTK中鼠标消息是在交互类型对象&#xff08;interactorstyle&#xff09;中响应&#xff0c;因此通过为交互类型对象&#xff08;interactorstyle&#xff09;添加观察者&#xff08;observer&#xff09;来监听相应的消息&#xff0c;当消息触发时&#xff0c;由命令模式执行相…

设计模式总结-组合模式

组合设计模式 模式动机模式定义模式结构组合模式实例与解析实例一&#xff1a;水果盘实例二&#xff1a;文件浏览 更复杂的组合总结 模式动机 对于树形结构&#xff0c;当容器对象&#xff08;如文件夹&#xff09;的某一个方法被调用时&#xff0c;将遍历整个树形结构&#x…

市面上的常见传感器价格

自动窗帘传感器的价格因品牌、型号、功能以及市场供需关系等因素而有所不同。一般来说&#xff0c;普通自动窗帘传感器的价格可能在几十到几百元人民币不等。然而&#xff0c;一些高端、智能型或具有特殊功能的传感器可能会更贵&#xff0c;价格可能达到几百元甚至更高。 购买时…

Spark面试整理-解释Spark中的内存管理和持久化机制

在Apache Spark中,内存管理和持久化机制是核心特性,它们对于提高大规模数据处理的效率和性能至关重要。 内存管理 统一的内存管理:Spark使用统一的内存管理模型,将执行内存(用于计算如shuffle、join等)和存储内存(用于缓存数据如RDDs)合并在一起。这种模型提供了更高的…

刷题之Leetcode27题(超级详细)

27. 移除元素 力扣题目链接(opens new window)https://leetcode.cn/problems/remove-element/ 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用…

面试算法-132-和至少为 K 的最短子数组

题目 给你一个整数数组 nums 和一个整数 k &#xff0c;找出 nums 中和至少为 k 的 最短非空子数组 &#xff0c;并返回该子数组的长度。如果不存在这样的 子数组 &#xff0c;返回 -1 。 子数组 是数组中 连续 的一部分。 示例 1&#xff1a; 输入&#xff1a;nums [1], …

一篇文章带你掌握二叉树(附带二叉树基本操作完整代码演示,和两种思路)

【本长内容】 1. 掌握树的基本概念 2. 掌握二叉树概念及特性 3. 掌握二叉树的基本操作 4. 完成二叉树相关的面试题练习 1. 树形结构 1.1 概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是…

Vue - 2( 10000 字 Vue 入门级教程)

一&#xff1a;Vue 1.1 绑定样式 1.1.1 绑定 class 样式 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>绑定样式</title><style>......</style><script type"text/javascript" src&…

从零开始:成功进入IT行业的方法与技巧

如今&#xff0c;信息技术&#xff08;IT&#xff09;行业成为了就业市场上的热门领域。由于其快速发展和广阔的职业机会&#xff0c;许多人希望能够进入这个行业。然而&#xff0c;对于没有任何相关背景知识的人来说&#xff0c;要成功进入IT行业可能会面临一些挑战。本文将分…

基于java web的超市管理系统

摘要 随着社会经济的不断发展&#xff0c;人们的生活水平不断提高。越来越多的零售行业得到了快速的发展&#xff0c;以最常见的超市最为明显。零售行业繁荣的背后也随之带来了许多行业隐患&#xff0c;越来越激烈的行业竞争不断的要求经营者更加高要求的管理超市内部的整个供…

代码随想录第31天 | 455.分发饼干 、376. 摆动序列、53. 最大子序和

一、前言 参考文献&#xff1a;代码随想录 今天的内容是贪心算法&#xff0c;这个算法分为两个极端&#xff0c;一个极端是很简单&#xff0c;靠常识就可以解出来&#xff0c;另外一个是&#xff0c;你怎么想也想不出来&#xff0c;只能看题解的那种。 and 对第一天和第二天…

微信小程序上传到gitee

共三步 1、新建gitee仓库 点号&#xff0c;新建仓库&#xff0c;填入仓库信息新建即可 2、修改版本管理参数 微信开发者工具中点开版本管理&#xff0c;未初始化&#xff0c;需要先点初始化 接下来将设置中的通用、网络认证、远程3个部分的参数填写好 通用&#xff1a;核对…

DashOJ-8.奇偶统计

题目链接&#xff1a; 题目详情 - 奇偶统计 - DashOJ 思路&#xff1a; &#xff08;while循环加if分支语句&#xff09; 巧用死循环 while(1) 然后在里面第一句就判断输入的数字是否等于0 if(x0) &#xff0c;如果 等于0就直接break跳出循环 或者用 while(cin>>x) 代…

Win11解决Fiddler everyone卡在启动界面

问题描述 fiddler在window11卡在启动界面,重新安装也不行 解决方案 右击以管理员运行