当前位置: 首页 > news >正文

vue3中provide和inject详解

provide和inject是什么

provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件(提供者)向其所有子孙组件(使用者)提供数据或方法,而不需要通过逐层组件传递属性(props)。

provide和inject如何使用

provide()

  • 类型
function provide<T>(key: InjectionKey<T> | string, value: T): void
  • 详细信息
    provide 功能允许一个组件定义可供其子孙组件注入的数据。
    provide() 接受两个参数:第一个参数是要注入的 key,可以是一个字符串或者一个 symbol,第二个参数是要注入的值。当使用 TypeScript 时,key 可以是一个被类型断言为 InjectionKeysymbolInjectionKey 是一个 Vue 提供的工具类型,继承自 Symbol,可以用来同步 provide()inject() 之间值的类型。
    与注册生命周期钩子的 API 类似,provide() 必须在组件的 setup() 阶段同步调用。
  • 示例代码
<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'// 提供静态值
provide('foo', 'bar')// 提供响应式的值
const count = ref(0)
provide('count', count)// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

inject ()

  • 类型
// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T// 使用工厂函数
function inject<T>(key: InjectionKey<T> | string,defaultValue: () => T,treatDefaultAsFactory: true
): T
  • 详细信息
    inject 功能允许子孙组件接收祖先组件通过 provide 提供的数据。
    第一个参数是注入的 key(这个key就是用来和provide设定的第一个参数进行匹配)。Vue 会遍历父组件链,通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值,那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值,inject() 将返回 undefined,除非提供了一个默认值。
    第二个参数是可选的,即在没有匹配到 key 时使用的默认值。
    第二个参数也可以是一个工厂函数,用来返回某些创建起来比较复杂的值。在这种情况下,必须将 true 作为第三个参数传入,表明这个函数将作为工厂函数使用,而非值本身。
    与注册生命周期钩子的 API 类似,inject() 必须在组件的 setup() 阶段同步调用。
    当使用 TypeScript 时,key 可以是一个类型为 InjectionKeysymbolInjectionKey 是一个 Vue 提供的工具类型,继承自Symbol,可以用来同步provide()inject() 之间值的类型。
  • 示例代码
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'// 注入不含默认值的静态值
const foo = inject('foo')// 注入响应式的值
const count = inject('count')// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)// 注入一个值,若为空则使用提供的默认值
const bar = inject('foo', 'default value')// 注入一个值,若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})// 注入一个值,若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>

和响应式数据配合使用

provide和inject也可以传递响应式数据和方法,但是传递响应式数据的时候,官网做了一个推荐使用:当提供 / 注入响应式的数据时,**建议尽可能将任何对响应式状态的变更都保持在供给方组件中。**这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内,使其更容易维护。

<!-- 在提供方组件内 -->
<script setup>
import { provide, ref } from 'vue'const location = ref('North Pole')function updateLocation() {location.value = 'South Pole'
}provide('location', {location,updateLocation
})
</script>
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script><template><button @click="updateLocation">{{ location }}</button>
</template>

实现原理

在 Vue 3 中 组件的实例方法和属性的继承不再依赖于原型链,而是引入了Composition API,它采用了一种不同的方式来组织组件的代码和状态。组件的选项被重构为一个配置对象,其中 setup 函数用于定义组件的响应式数据、计算属性、方法等。这些选项不再依赖于原型链,而是直接导出给组件实例。

这个改进带来了以下好处:

  • 更稳定的数据提供:在 Vue 3 中,每个组件实例都有自己的私有作用域,不会受到原型链的影响,因此不存在 Vue 2 中的潜在问题。
  • 更好的类型检查:在 Vue 3 中,TypeScript 或 Flow 等类型检查工具可以更准确地检测到 inject 注入的数据类型。

vue3中的实现原理

provide 的原理:

  • provide 是在父组件中使用的选项,用于提供数据给子组件。它实际上是一个函数,它会在父组件实例上创建一个名为 _provided 的对象。
  • _provided 对象存储了提供给子组件的数据,而且这些数据会在整个组件树中可用,子组件可以通过inject选项来访问这些数据。。
  • 当父组件提供的数据发生变化时,Vue 3 的响应式系统会追踪这些变化并通知所有依赖这些数据的子组件进行更新。

inject 的原理:

  • 子组件通过inject选项声明需要注入的数据,可以是一个数组、一个对象或一个函数。这些声明告诉Vue 3要从父组件的提供数据中获取哪些属性。
  • 当子组件访问通过inject注入的数据时,Vue 3会在组件树中向上搜索父组件,直到找到包含提供数据的组件或到达根组件。
  • 一旦找到包含提供数据的组件,Vue 3会从该组件的_provided属性中获取相应的数据。
  • 如果提供的数据是响应式的,子组件将自动成为这些数据的依赖,当提供的数据发生变化时,子组件将被通知并进行更新。

相关文章:

vue3中provide和inject详解

provide和inject是什么 provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件&#xff08;提供者&#xff09;向其所有子孙组件&#xff08;使用者&#xff09;提供数据或方法&#xff0c;而不需要通过逐层组件传递属性&#xff08;props&…...

相约华中科技大学,移动云技术论坛来了!NineData创始人CEO叶正盛将分享《数据库全球实时传输技术实践》的主题演讲

2024年9月12日&#xff0c;中国移动云能力中心将在华中科技大学举办“智算浪潮下数据库发展论坛”&#xff0c;共同探讨数据库技术与应用的创新&#xff0c;分享算力网络时代数据库未来发展的洞见。本次论坛&#xff0c;NineData 创始人&CEO 叶正盛受邀参会&#xff0c;并来…...

华为 昇腾 310P 系列 AI 处理器支持 140Tops 的 AI 算力。

1、产品简介 模组是基于昇腾 310P 系列 AI 处理器设计而成&#xff0c;可实现图像、视频等多种数据分析 与推理计算。超强的视频编解码能力以及支持 140Tops 的 AI 算力。在边缘侧及端侧的嵌入式计算 领域&#xff0c;有着极高的性价比&#xff0c;具有超强算力、 超高能效、…...

基于单片机的小型生态鱼缸控制器设计

本设计以STC89C52单片机为核心&#xff0c;利用DS18B20温度传感器和LCD1602液晶显示器实时采集和显示当前环境温度&#xff0c;并根据与预设温度阈值的比较结果控制加热棒或风扇进行加热或制冷操作。此外&#xff0c;该控制器还利用DS1302完成计时功能&#xff0c;在预设时间点…...

git-repo使用

即使用 XML 格式文件&#xff08;manifest 清单文件&#xff09;定义一个项目的多仓库关联&#xff0c;然后用 repo 客户端工具操作多仓库 git repo命令行格式&#xff1a; git repo <子命令> <参数>创建一个空目录&#xff0c;作为工作区。 $ mkdir workspace$ …...

如何设计实现完成一个FPGA项目

设计并完成一个FPGA项目是一个复杂但非常有价值的工程任务。以下是一个详细的步骤指南,帮助你从零开始完成一个FPGA项目。 1. 项目定义与需求分析 确定项目目标:明确项目要实现的功能和性能指标。需求分析:列出所有功能需求、性能需求、接口需求等。可行性分析:评估技术可…...

Oracle(106)如何实现透明数据加密?

透明数据加密&#xff08;TDE&#xff09;是一种用于保护数据库中静态数据的加密技术。TDE通过自动加密数据库文件和日志文件&#xff0c;确保数据在磁盘上是加密的&#xff0c;从而防止未经授权的访问。TDE的一个主要优点是它对应用程序是透明的&#xff0c;不需要对应用程序代…...

用Python实现时间序列模型实战——Day 18: 时间序列中的季节性与周期性预测

一、学习内容 1. 季节性调整与周期性预测 季节性调整 是在时间序列分析中常用的技术&#xff0c;旨在去除数据中因季节性波动导致的周期性变化&#xff0c;使数据更易于解释和预测。通常&#xff0c;我们可以使用季节性分解方法来分离时间序列中的趋势、季节性和随机成分。 …...

JavaScript ES6特性(var let const、function=>、增强表达赋值、类与对象)

一、var let const 1、var var明明定义在for里面的但是外部能够访问这个变量,说明var可以跨域访问。 2、let let明明定义在for里面的但是外部不能够访问这个变量,说明let不可以跨域访问。 3、const const foo = {}; // 为 foo 添加一个属性,可以成功 foo.prop = 123; fo…...

Paddle安装详解(CPU版本)

目录 1. 安装Python2. 安装paddle3. 验证3.1 初步验证3.2 将numpy版本从2.1.1降为2.0.13.3 再次验证1. 安装Python Python版本 C:\Users\james>python --version Python 3.12.62. 安装paddle 安装paddle及依赖库setuptools python -m pip install paddlepaddle==2.6.1 -…...

PHP即刻送达同城派送小程序系统

即刻送达&#xff0c;同城派送小程序系统让生活更便捷 &#x1f680; 瞬间连接&#xff0c;即刻送达的奇迹 你是否曾经因为等待快递而焦急万分&#xff1f;是否渴望有一种方式能让物品像魔法一样瞬间出现在你面前&#xff1f;现在&#xff0c;有了“即刻送达同城派送小程序系…...

RabbitMQ的Direct Exchange模式实现的消息发布案例

Producer生产者代码 import com.rabbitmq.client.Channel; import com.rabbitmq.client.Connection; import com.rabbitmq.client.ConnectionFactory;public class RabbitMQProducer {private final static String EXCHANGE_NAME "direct_message_exchange";privat…...

数据结构-二叉树-基础知识

数据结构-二叉树-基础知识 1.树1.1什么是树1.2基本概念子节点、父节点叶节点节点的度树的高度/深度节点的子孙、祖先 1.3树与非树1.4如何实现1.5实例 2.二叉树2.1什么是二叉树2.2特殊的二叉树满二叉树完全二叉树 2.3性质层数度节点 2.4存储结构 1.树 1.1什么是树 树型结构是一…...

wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

昨天同事那边有个需求&#xff0c;就是要实现聊天功能&#xff0c;需要用到一个富文本编辑器&#xff0c;参考如下&#xff1a; 上面的这个效果图是博客园的评论输入框 最终使用wangEditor编辑器实现的效果如下&#xff1a; 只保留了个别的菜单&#xff1a; 默认模式的wangE…...

9.11.

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(this)) {//设置时钟ui->setupUi(this);startTimer(1000);//文本框label居中对齐ui->label_2->setAlignment(Qt::AlignCenter);connect(this,&Widget::my_sign…...

【GeekBand】C++设计模式笔记1_介绍

课程目标 理解松耦合设计思想掌握面向对象设计原则掌握重构技法改善设计掌握GOF核心设计模式 什么是设计模式 目标&#xff1a;复用&#xff0c;以不变应万变 GOF设计模式 从面向对象谈起 深入理解面向对象 向下&#xff1a;深入理解三大面向对象机制 封装&#xff1a;隐藏…...

MySQL 数据库:原理、应用与发展

摘要&#xff1a;本文深入探讨了 MySQL 数据库相关内容。首先介绍了 MySQL 作为开源关系型数据库管理系统的显著特点&#xff0c;包括易用性、跨平台性、高性能、可扩展性、开源免费以及数据安全性等方面。接着详细阐述了其安装与配置过程&#xff0c;涵盖在不同操作系统上的安…...

7.2图像旋转

实验原理 在OpenCV中&#xff0c;图像旋转也是一种常见的几何变换&#xff0c;它可以用来调整图像的方向。图像旋转通常涉及绕着图像中心点旋转一定角度的操作。与图像平移类似&#xff0c;旋转也可以通过仿射变换来实现&#xff0c;但是旋转需要使用到旋转矩阵来定义旋转的角…...

学学vue-2

1.7 指令修饰符 keyup.enter&#xff1a;监听键盘回车事件&#xff0c;回车触发事件keyup.enter代码 v-model修饰符&#xff1a; v-model.trim&#xff1a;去首尾空格v-model.number&#xff1a;变数字&#xff08;如果是数字的话&#xff0c;转变为数字&#xff09; 事件名.…...

什么是 Grafana?

什么是 Grafana&#xff1f; Grafana 是一个功能强大的开源平台&#xff0c;用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘&#xff08;Dashboard&#xff09;&#xff0c;它能够帮助用户监控实时数据、生成历史报告&#xff0c;甚至进行预测分析。Grafana…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...