Vue3 provide 和 inject的使用

在 Vue 中,provideinject 是 Composition API 的一对功能,用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件提供数据或方法,而不需要通过逐层传递 props

1. provide

provide 用于父组件中,提供数据或方法,供其子组件使用。

<script setup>
import { provide } from 'vue';# 要给子组件传值isLogin,ajax里会重新赋值isLogin,provide写在外层即可,ajax里重新赋值后子组件会自动监听更新为新的值
const isLogin = ref(!1);
provide('isLogin', isLogin);
const checkIsLogin = () => {(api as any).User.isLogin().then((res) => {isLogin.value = !0;});
}
checkIsLogin();
</script>

2. inject

inject 用于子组件中,接收父组件通过 provide 提供的值。

父组件数据变化,想要子组件实时跟着变,injext接收时要设置为ref

重新赋值后子组件会自动监听更新为新的值

<script setup>
import { inject } from 'vue';let isLogin= ref(inject("isLogin"))</script><template><p>{{ message }}</p>
</template>

使用场景

  • 父子组件传值:适用于层级较深的组件传递数据,避免层层传递 props。
  • 跨组件共享数据:适用于在多个组件中共享相同的数据。

注意

  • provide 和 inject 主要用于组件之间的通信,特别是当组件的嵌套较深时,它们可以避免 prop drilling(逐层传递 props)。
  • 它们不具备响应式特性,除非提供的对象是响应式的。如果希望注入的数据是响应式的,可以通过 reactive 或 ref 包装。

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

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

相关文章

C++11——异常

1.异常概念 异常是一种处理错误的方式&#xff0c;当一个函数发现自己无法处理的错误时就会抛出异常&#xff0c;让函数的调用者处理这个错误 throw&#xff1a;当出现问题时&#xff0c;程序会抛出一个异常&#xff0c;通过 throw 来完成catch&#xff1a;catch 关键字捕获异…

Redis ⽀持哪⼏种数据类型?适⽤场景,底层结构

目录 Redis 数据类型 一、String&#xff08;字符串&#xff09; 二、Hash&#xff08;哈希&#xff09; 三、List&#xff08;列表&#xff09; 四、Set&#xff08;集合&#xff09; 五、ZSet(sorted set&#xff1a;有序集合) 六、BitMap 七、HyperLogLog 八、GEO …

AI风向标|算力与通信的完美融合,SRM6690解锁端侧AI的智能密码

当前&#xff0c;5G技术已经成为推动数字经济和实体经济深度融合的关键驱动力&#xff0c;进入5G发展的下半场&#xff0c;5G与AI的融合正推动诸多行业的数字化转型和创新发展&#xff0c;终端侧AI和端云混合式AI将广泛应用于各类消费终端和各行各业。 在推动5G和AI与各行业场…

简单工厂模式、方法工厂模式

简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 简单工厂模式的核心思想是通过一个工厂类&#xff0c;根据提供的参数来决定创建哪一个具体的产品类实例。 这个模式通常用于产品种类较少&#xff0c;且不经常变化的场景。 interface Product {void create(); }…

torchvision库在进行图片转换操作中报antialias参数没有显式设置会导致不同图片后端中的值不统一的警告信息

诸神缄默不语-个人CSDN博文目录 这个警告信息是我在直接调用已经封装好的视觉模型时出现的&#xff0c;位置是&#xff1a; D:\anaconda3\envs\venv_path\Lib\site-packages\torchvision\transforms\functional.py:1603 警告信息全文是&#xff1a; UserWarning: The default…

【HOT100第四天】除自身以外数组的乘积,矩阵置零,螺旋矩阵,旋转图像

今天感觉是边界值练习专场。。。整体难度不大但是细节还是需要多动手写一写。 238. 除自身以外的数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意…

Angular中的ngOnchange()的汇总

ngOnChanges() 是 Angular 中的一个生命周期钩子函数&#xff0c;它在组件或指令的 输入属性&#xff08;Input()&#xff09;发生变化时被调用。这个钩子可以帮助你检测输入数据的变化&#xff0c;并对数据变化做出反应。 1.监听的对象 ngOnChanges() 监听的是 通过 Input() …

百度智能云千帆大模型平台引领企业创新增长

本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容&#xff0c;请访问&#xff1a; https://baiduworld.baidu.com 首先&#xff0c;跟大家分享一张图&#xff0c;这个是我们目前大模型应用落地的场景分布。可以看到&#xff0c;大模型…

记录java Collections.sort踩的坑

前言 java Collections.sort 排序失效&#xff1f;为什么会排序失效呢&#xff1f; 需求和问题 需求&#xff1a;获取指定文件夹下的所有文件&#xff0c;并且按照修改时间顺序从大到小排序&#xff0c;如果修改时间相同&#xff0c;则按照创建时间从大到小排序 // 输入lis…

【企业级分布式系统】ELK优化

文章目录 Elasticsearch作为日志存储时的优化优化ES索引设置优化线程池配置锁定内存&#xff0c;不让JVM使用Swap减少分片数、副本数 Elasticsearch作为日志存储时的优化 linux内核优化、JVM优化、ES配置优化、架构优化&#xff08;filebeat/fluentd代替logstash、加入kafka做…

【Flutter 问题系列第 84 篇】如何清除指定网络图片的缓存

这是【Flutter 问题系列第 84 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.24.3、Dart SDK&#xff1a;3.5.3&#xff0c;网络图片缓存用的插件 cached_network_image: 3.4.1&#xff0c;缓存的网络图像的存储和检索用…

亚马逊商品详情API接口解析,Json数据示例返回

亚马逊的商品详情API接口&#xff08;如Amazon Product Advertising API&#xff09;允许开发者获取商品的详细信息&#xff0c;包括价格、描述、图片URL等。以下是一个示例的JSON数据返回结构&#xff0c;以及相应的解析说明。请注意&#xff0c;实际返回的数据结构可能会根据…

SIMCom芯讯通A7680C在线升级:FTP升级成功;http升级腾讯云对象储存的文件失败;http升级私有服务器的文件成功

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…

uniapp实现中英文切换

home.js const data {ZH: {content1: "苹果",},EN: {content1: “Apple”,} } export default dataindex.js import home from "./home.js" export default {home }en.js import part1 from ./data/part1/index.js const en {language: {name: "…

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…

活着就好20241120

今天是20号&#xff0c;周三&#xff0c;亲爱的朋友们&#xff0c;大家早上好&#xff01;在连续两天的努力之后&#xff0c;我们迎来了这个同样充满希望与挑战的周三早晨。让我们带着前两天的收获与经验&#xff0c;怀揣着新的目标和梦想&#xff0c;继续在这丰富多彩的一天中…

基于yolov8、yolov5的行人检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要&#xff1a;行人检测在交通管理、智能监控和公共安全中起着至关重要的作用&#xff0c;不仅能帮助相关部门实时监控人群动态&#xff0c;还为自动化监控系统提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的行人检测模型&#xff0c;该模型使用了…

Java安全—log4j日志FastJson序列化JNDI注入

前言 log4j和fastjson都是这几年比较火的组件&#xff0c;前者是用于日志输出后者则是用于数据转换&#xff0c;今天我们从源码来说一下这两个组件为何会造成漏洞。 实验环境 这里的idea要进行一下配置&#xff0c;因为我们要引用第三方组件&#xff0c;而这些第三方组件都是…

【白话机器学习系列】白话 Softmax

文章目录 什么是 SoftmaxSoftmax 函数详解示例编程实现对矩阵应用 Softmax 函数 什么是 Softmax Softmax 函数&#xff0c;又称归一化指数函数&#xff0c;它使用指数函数将输入向量归一化为概率分布&#xff08;每一个元素的范围都在 ( 0 , 1 ) (0,1) (0,1) 之间&#xff0c;…

golang通用后台管理系统10(退出登录,注销token)

1.实现思路&#xff1a;将登录用户的token加入黑名单 2. //1.2 用户退出 exploreRouter.POST("/logout", sysCtrl.Logout) 3.loginController.go //用户退出 func Logout(c *gin.Context) {logger : commonLog.InitLogger()sysUser : service.GetProfile1(c)fmt.…