Vue3-23-组件-依赖注入的使用详解

什么是依赖注入

个人的理解 ： 依赖注入，是在 一颗 组件树中，由 【前代组件】 给 【后代组件】 提供 属性值的  一种方式 ；这种方式 突破了 【父子组件】之间通过 props 的方式传值的限制，只要是 【前代组件】提供的 依赖，【后代组件】都可以执行注入使用；我愿称之为 【跨代传值】。

依赖注入使用到的 关键方法：
provide() : 提供依赖
inject() : 注入依赖

依赖注入使用的注意事项

1、依赖注入的组件 ，必须是 一棵组件树的 前后代关系，兄弟组件不支持；
2、不建议后代组件中直接修改 注入的依赖的值，建议 前代组件中 将修改依赖的方法一并暴露出去；
3、依赖注入支持 全局的注入（这个较为特殊一些）；
借用官网的一张图就是下面的样子：

在这里插入图片描述

依赖注入的使用方式

1、注入普通值 ： 直接指定 key  和 value 
2、注入响应式的值 ： 注入的值是一个 响应式的对象
3、注入时提供默认值 ：inject() 方法 第二个参数可以指定默认值，当没有提供依赖时 展示的时默认值
4、限制 提供的数据不能被 后代修改 ： 使用 readonly 进行限制
5、同时提供响应式的修改方法
6、全局提供依赖 ; 可以在 app 中进行全局提供依赖，所有的组件都可以注入依赖
7、使用 Symbol() 的方式指定 key
8、给 依赖注入 提供 类型约束下面对上述的清醒进行案例介绍：

1、注入普通值

provide(key,value) : 提供依赖
const value = inject(key) : 注入依赖

前代组件 ： 提供依赖

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br><br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 提供一个普通的依赖对象provide('key1','key1 的值')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br>注入的普通的依赖值 ：{{ key1Value }}</div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 注入依赖 - 普通的数据const key1Value = inject('key1')console.log('后代组件中接收到的 key1 的值 ： ',key1Value)</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述

2、注入响应式的值

前代组件 ： 提供依赖

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  APP.vue 中的 abc : {{ abc }}<br><br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 提供一个响应式的依赖对象const abc = ref(1001)provide('key2',abc)</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br>注入的响应式依赖 ：{{ key2Value }}</div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject} from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 注入依赖-响应式的依赖const key2Value = inject('key2') console.log('后代组件中接收到的 key2 的值 ：',key2Value)</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述

3、注入依赖时写一个默认值

后代组件 在进行 依赖注入时，如果前代组件没有 提供依赖，则可以只用默认值进行代替
默认值 是 inject() 方法的第二个参数

前代组件 ： 不提供依赖

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  <br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br>注入的响应式依赖 ：{{ key2Value }}</div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject,toRef } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 注入依赖-响应式的依赖const key2Value = inject('key2','key2的默认值') console.log('后代组件中接收到的 key2 的值 ：',key2Value)</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述

4、提供响应式的修改方法

前代组件 ： 提供依赖
此时提供的依赖是 一个对象的形式 ：包含 数据 和 方法

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  APP.vue 中的 abc : {{ abc }}<br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 提供一个响应式的依赖对象const abc = ref(1001)// 提供修改的方法const changeABC = ()=>{console.log('App 中修改 abc 的值为 888');abc.value = 888;}// 提供 依赖对象 和 方法provide('key2',{abc,changeABC})</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br>注入的响应式依赖 ：{{ key2Value }}<br><button @click="changeAbcFromHd">修改 abc 的值</button></div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject} from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 注入依赖-响应式的依赖const key2Value = inject('key2') console.log('后代组件中接收到的 key2  ：',key2Value)// 点击按钮修改 依赖的值const changeAbcFromHd = ()=>{key2Value.changeABC();}</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果： 注意观察点击前后的 数据状态的变化

初始页面点击按钮后
在这里插入图片描述在这里插入图片描述

5、readonly 限制修改

当想限制传递的依赖只能是只读时，需要使用 readonly 关键字进行限制；
注意 ： 只能是针对 没有提供修改函数的依赖，如果该依赖提供了修改函数，通过修改函数触发的修改仍然是有效的。

前代组件 ： 提供依赖 ： 一个普通的，一个只读的

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  APP.vue 中的 abc : {{ abc }}<br>APP.vue 中的 xyz : {{ xyz }}<br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide,readonly } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 提供一个普通的依赖对象// provide('key1','key1 的值')// 提供一个响应式的依赖对象const abc = ref(1001)const xyz = ref(2002)// 提供 依赖对象provide('key2',abc)// 提供一个只读的依赖对象provide('key3',readonly(xyz))</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><!-- 注入的普通的依赖值 ：{{ key1Value }} --><!-- <br> -->注入的响应式依赖key2 ：{{ key2Value }}<br>注入的响应式依赖key3 ：{{ key3Value }}<br></div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 注入依赖-响应式的依赖const key2Value = inject('key2') console.log('后代组件中接收到的 key2  ：',key2Value)const key3Value = inject('key3') console.log('后代组件中接收到的 key3  ：',key2Value)// 延迟10s 执行修改console.log(new Date())setTimeout(() => {console.log(new Date(), '开始执行 依赖值的修改' )key2Value.value = 666;key3Value.value = 888;}, 10000);</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述
在这里插入图片描述

6、全局提供依赖

main.js ： 提供全局依赖

import { createApp } from 'vue'// 根组件
import App from './App.vue'// 创建应用实例
const app = createApp(App)// 直接注入一个全局的 依赖
app.provide('globalKey1','全局的变量值1')// 挂在应用，渲染页面，这一步应该是在最后执行的
app.mount("#app")

后代组件 ： 注入依赖

<template>
</template><script setup lang="ts">// 引入 inject 方法import { inject } from 'vue'const globalValue = inject('globalKey1')console.log('组件中注入全局的变量 ：',globalValue)</script><style scoped>
</style>

运行效果：

在这里插入图片描述

7、Symbol() 的方式指定 key

之前我们在提供依赖的时候，都是直接用字符串作为依赖的key，
说实话，这样做 一点毛病没有。
但是，大家不都是讲求规范嘛，Symbol() 就提供了这种方式：
1、写一个专门用来声明 key 的文件；
2、前代组件 引入 key，提供依赖；
3、后代组件 引入 key ，注入依赖。

key 文件


// 声明 两个key
export const KEY1 = Symbol()export const KEY2 = Symbol()

前代组件 ： 提供依赖

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  APP.vue 中的 abc : {{ abc }}<br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 引入定义的keyimport { KEY1 ,KEY2} from './key';// 提供依赖const abc = ref(1001)provide(KEY1,abc)provide(KEY2,'key2valueladfadfa')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><!-- 注入的普通的依赖值 ：{{ key1Value }} --><!-- <br> -->注入的响应式依赖key ：{{ keyValue }}<br>注入的响应式依赖key2 ：{{ key2Value }}<br></div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 引入 key import { KEY1,KEY2 } from './key';// 注入依赖const keyValue = inject(KEY1) const key2Value = inject(KEY2) </script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述

8、 依赖注入 提供 类型约束

InjectionKey 接口 ： 限制 依赖注入的值的类型

key文件


// 从 vue 中 导入 类型
import type { Ref,InjectionKey } from 'vue'// 声明 key : 指定注入的依赖的值的类型是 Ref
export const KEY1 = Symbol() as InjectionKey<Ref<number>>
// 声明 key : 指定注入的依赖的值的类型是 string
export const KEY2 = Symbol() as InjectionKey<string>

前代组件 ： 提供依赖

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  APP.vue 中的 abc : {{ abc }}<br><!-- 引入子组件 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,provide } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 引入定义的keyimport { KEY1 ,KEY2} from './key';// 提供依赖const abc = ref(1001)// 提供一个响应式的对象依赖provide(KEY1,abc) // 提供一个 普通的 string 对象provide(KEY2,'key2valueladfadfa')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

后代组件 ： 注入依赖

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><!-- 注入的普通的依赖值 ：{{ key1Value }} --><!-- <br> -->注入的响应式依赖key ：{{ keyValue }}<br>注入的响应式依赖key2 ：{{ key2Value }}<br></div></template><script setup lang="ts">// 引入 inject 方法import { ref,inject } from 'vue'// 引入 Ref 类型import type { Ref } from 'vue';// 声明一个变量const msg = ref('这是子组件的msg变量')// 引入 key import { KEY1,KEY2 } from './key';// 注入依赖 ： 同样可以使用泛型指定类型const keyValue = inject<Ref<number>>(KEY1) const key2Value = inject<string>(KEY2,"默认值") </script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

运行效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

至此，依赖注入的使用就完成了。

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

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

相关文章

[MySQL]用基本的mysql语句写的{商店的数据}和{学生成绩}

[MySQL]用基本的mysql语句写的{商店的数据}和{学生成绩}

文章目录 前言一、题目二、创建2.写入table 三.查看表单结构四.插入数据1.俩种方法2.指定插入 五.查询1.全部和指定查询2.别名查询3.去重4.排序5.条件查询&#xff08;where) 六.修改七.删除八.在table中插入一列总结&#xff1a; 前言 提示&#xff1a;以下是本篇文章正文内容…
阅读更多...
实现单链表的基本操作（力扣、牛客刷题的基础笔试题常客）

实现单链表的基本操作（力扣、牛客刷题的基础笔试题常客）

本节来学习单链表的实现。在链表的刷题中&#xff0c;单链表占主导地位&#xff0c;很多oj题都在在单链表的背景下进行&#xff1b;而且很多链表的面试题都是以单链表为背景命题。所以&#xff0c;学好单链表的基本操作很重要 目录 一.介绍单链表 1.链表及单链表 2.定义一个…
阅读更多...
JVM垃圾收集器三色标记算法

JVM垃圾收集器三色标记算法

垃圾收集算法 分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法&#xff0c;这种算法没有什么新的思想&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆分为新生代和老年代&#xff0c;这样我们就可以根据各个年代的特点选择合适的垃圾收集算法。 比…
阅读更多...
day44代码训练｜动态规划part06

day44代码训练｜动态规划part06

完全背包和01背包问题唯一不同的地方就是&#xff0c;每种物品有无限件。 1. dp数组的含义 dp[i][j] 0-i物品&#xff0c;重量为j的容量时&#xff0c;最大的价值 2. 递推公式 dp[i][j] max(dp[i-1][j],dp[i][j-weight[i]]value[i]); 两种状态&#xff0c;不用物品i的话&…
阅读更多...
22.VRRP网关冗余

22.VRRP网关冗余

VRRP网关冗余 STP 是二层冗余技术 VRRP是三层冗余技术 这里如果网关挂掉的话&#xff0c;用户就无法访问外网&#xff0c;还得配置新的网关&#xff0c;VRRP就是用来解决这种问题的 原理&#xff1a;可以把R1 的优先级设置的高一点&#xff0c;先由R1 来掌管192.168.1.254这个…
阅读更多...
linux 性能优化-内存优化

linux 性能优化-内存优化

CPU 管理一样&#xff0c;内存管理也是操作系统最核心的功能之一。内存主要用来存储系统和应 用程序的指令、数据、缓存等。 1.内存原理 1.1.内存映射 1.1.1.日常生活常说的内存是什么? 我的笔记本电脑内存就是 8GB 的这个内存其实是物理内存物理内存也称为主存&#xff0…
阅读更多...
Redis原理之网络模型笔记

Redis原理之网络模型笔记

目录 1. 阻塞IO 2. 非堵塞IO 3. IO多路复用 ​3.1 select 3.2 poll 3.3 epoll 4. 信号驱动IO 5. 异步IO 6. Redis是单线程还是多线程 Redis采用单线程模型&#xff0c;这意味着一个Redis服务器在任何时刻都只会处理一个请求。Redis的网络模型涉及到阻塞I/O&#xff08;Blo…
阅读更多...
【图神经网络】在节点分类任务中无特征节点的特征表示

【图神经网络】在节点分类任务中无特征节点的特征表示

无特征节点的特征表示 节点度数degree pagerank 以pagerank起源的应用场景为例&#xff0c;不是所有的网站都是同等重要的&#xff0c;所以需要根据结构信息对节点进行排序。 直觉上&#xff0c;如果一个网站它有很多链接&#xff0c;它就很重要&#xff0c;举例来说&#…
阅读更多...
Leetcode—77.组合【中等】

Leetcode—77.组合【中等】

2023每日刷题&#xff08;六十五&#xff09; Leetcode—77.组合 算法思想 实现代码 class Solution { public:vector<vector<int>> combine(int n, int k) {vector<vector<int>> ans;vector<int> path;function<void(int)> dfs [&…
阅读更多...
tcp vegas 为什么好

tcp vegas 为什么好

我吹捧 bbr 时曾论证过它在和 buffer 拧巴的时候表现如何优秀&#xff0c;但这一次说 vegas 时&#xff0c;我说的是从拥塞控制这个问题本身看来&#xff0c;vegas 为什么好&#xff0c;并且正确。 接着昨天 tcp vegas 鉴赏 继续扯。 假设一群共享带宽的流量中有流量退出或有…
阅读更多...
JavaGUI（但期末速成版）之容器和控件

JavaGUI（但期末速成版）之容器和控件

点击返回标题->JavaGUI期末速成版-CSDN博客 前言 依旧先声明&#xff0c;本篇记录的JavaGUI编程都是十分精简的&#xff0c;内容只取常用的、套路的、应付期末考试的。 在学习本篇之前&#xff0c;很有必要先弄清楚Java基于swing包下的图形化编程的层次逻辑。 在前一篇中&a…
阅读更多...
在 TensorFlow 中启用 Eager Execution

在 TensorFlow 中启用 Eager Execution

TensorFlow 是一个端到端的开源机器学习平台&#xff0c;可以更轻松地构建和部署机器学习模型。TensorFlow 应用程序使用一种称为数据流图的结构。默认情况下&#xff0c;在 TensorFlow 1.0 版中&#xff0c;每个图形都必须在 TensorFlow 会话中运行&#xff0c;这只允许一次运…
阅读更多...
ansible的脚本---playbook剧本

ansible的脚本---playbook剧本

ansible的脚本---playbook剧本 playbook组成部分 1、tasks任务&#xff1a;包含要在目标主机上执行的操作&#xff0c;使用模块定义这些操作&#xff0c;每个任务都是一个模块的调用 2、varlables变量&#xff1a;存储和传递数据&#xff0c;变量可以自定义&#xff0c;可以…
阅读更多...
linux中vim命令修改jar包中的文件内容

linux中vim命令修改jar包中的文件内容

文章目录 概述vim命令修改配置文件 概述 首先问问为什么要直接修改jar包中的文件&#xff0c;而不是重新打包&#xff0c;在非必要的情况下&#xff0c;不要直接修改jar包&#xff0c;这样容易出事故&#xff1b; 当然也有一些场景不得不修改jar包&#xff0c;比如&#xff1a…
阅读更多...
【Linux系统编程】进程的认识

【Linux系统编程】进程的认识

介绍&#xff1a; 进程是程序执行的实体&#xff0c;可将其理解为程序。比如&#xff1a;当我们使用文本编辑器Notepad应用程序来编写一篇文章时&#xff0c;此时&#xff0c;Notepad应用程序就被加载到了内存中&#xff0c;并且它占用的资源&#xff08;如内存、CPU等&#xf…
阅读更多...
Vuex的学习-2

Vuex的学习-2

Vuex的核心概念 StateMutationAction 1.State State提供唯一的公共数据源&#xff0c;所有共享的数据都统一放在Store的State中进行存储。 const store new Vuex.Store({state : { count: 0 } }) 这是渲染的页面 组件访问数据的第一种方式 组件访问数据的第二种方式 // 1…
阅读更多...
MSPM0L1306例程学习-ADC部分(4)

MSPM0L1306例程学习-ADC部分(4)

MSPM0L1306例程学习系列 使用的TI的官方例程&#xff0c;即SDK里边包含的例程代码。 可以到TI官网下载并且安装SDK: https://www.ti.com.cn/tool/cn/download/MSPM0-SDK/ MCU使用的是MSPM0L1306, 对于ADC部分&#xff0c;有10个例程&#xff1a; 今天要讲的例程是adc12_14bit…
阅读更多...
mac电脑m1 arm架构安装虚拟机教程

mac电脑m1 arm架构安装虚拟机教程

1、准备一台虚拟机&#xff0c;安装CentOS7 常用的虚拟化软件有两种&#xff1a; VirtualBoxVMware 这里我们使用VirtualBox来安装虚拟机&#xff0c;下载地址&#xff1a;Downloads – Oracle VM VirtualBox 001 点击安装 002 报错&#xff1a;he installer has detected an…
阅读更多...
用模型预测测试数据

用模型预测测试数据

Hi, I’m Shendi 2、用模型预测测试数据 在之前已经训练好了一个模型&#xff0c;可以通过 model.save("path") 来保存模型到硬盘&#xff0c;下次直接使用。 这个模型使用的 mnist 数据集训练&#xff0c;这个数据集包含6万训练样本和一万测试样本&#xff0c;28*28…
阅读更多...
linux下的进程组与会话的区别

linux下的进程组与会话的区别

进程组&#xff08;Process Group&#xff09;和会话&#xff08;Session&#xff09;是Unix/Linux操作系统中的两个概念&#xff0c;它们之间有一些关键区别&#xff1a; 定义和范围&#xff1a;一个进程组是一组相关进程的集合&#xff0c;它们具有相同的进程组ID&#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023