Vue3中provide,inject使用

news2025/1/16 17:02:15

一,provide,inject使用

应用场景:向孙组件传数据
应用Vue3碎片: ref,reactive,isRef,provide, inject

1.provide,inject使用

a.爷组件引入

import {ref,provide} from 'vue'
const drinkList=ref({
   drink:['蜜雪冰城']}
);
provide('drinkList',drinkList)

a.孙组件取用:

import {ref,inject,isRef} from 'vue'
const getDrink=inject('drinkList')
const drinkName=reactive({val:""})

function getRole(){
 if(isRef(getDrink)){
  drinkName.val=getDrink._rawValue.drink[0]
 }
}

c.获取显示


<ListItem>已点饮品:{{drinkName.val}}</ListItem>

二,全局注入取用

应用Vue3碎片: ref,app.config.globalProperties,getCurrentInstance

a.main.js中

app.config.globalProperties.$user={
name:"Nick",
role:"顾客",
}

b.孙组件中中取用

import {ref,inject,isRef,getCurrentInstance} from 'vue'
const supRoot = getCurrentInstance();
const user=supRoot.appContext.config.globalProperties.$user;
const getrole=ref('')

function getRole(){
 getrole.value=user.role;
}

c,获取显示


<ListItem>当前用户名:{{$user.name}}</ListItem>
<ListItem>获取角色名: {{getrole}}</ListItem>

三,显示效果:

在这里插入图片描述

简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.provide(),inject()
2.app.config.globalProperties
3.Vue3中使用自定义指令
在这里插入图片描述

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

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

相关文章

LeetCode、2542. 最大子序列的分数【中等,排序+小顶堆】

文章目录 前言LeetCode、2542. 最大子序列的分数【中等&#xff0c;排序小顶堆】题目及类型思路及代码实现 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领…

安泰射频功率放大器的主要的类型及主要参数

射频功率放大器是一种将射频信号放大到更高功率级别的电子设备。根据其工作原理和应用要求&#xff0c;射频功率放大器可以分为不同的类型。下面西安安泰将介绍一些常见的射频功率放大器类型和相关的主要参数。 A类功率放大器&#xff1a;A类功率放大器是一种广泛使用的线性放大…

Navicat教程

下载连接&#xff08;无限使用版&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1IprYLRv0bSnW-XKn0trRtw 提取码&#xff1a;j6qx 连接使用 1.1 连接数据库 打开navicat&#xff0c;点击连接&#xff0c;选择数据库 1.2 操作数据库 右键连接&#xff0c;点击新建数…

Excel 动态可视化图表分享

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 Excel 2021实操 100集&#xff0c; Excel 2021函数大全 80集 Exc…

【C++】入门C++前想要了解的小知识

个人主页 &#xff1a; zxctsclrjjjcph 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 目录 1. 前言2. 什么是C3. C的发展史4. C的重要性4.1 语言的使用广泛度4.2 在工作领域中4.3 在校招领域中 5. 如何学习C5.1 看看别人怎么学习的5.2 自己怎么学 1. 前言 今天开…

【FastAPI】请求体

在 FastAPI 中&#xff0c;请求体&#xff08;Request Body&#xff09;是通过请求发送的数据&#xff0c;通常用于传递客户端提交的信息。FastAPI 使得处理请求体变得非常容易。 请求体是客户端发送给 API 的数据。响应体是 API 发送给客户端的数据 注&#xff1a;不能使用 …

docker容器和常用命令

1.什么是容器 容器是隔离的环境中运行的一个 进程 , 如果进程结束 , 容器就会停止. 细致: 容器的隔离环境 , 拥有自己的 ip 地址 , 系统文件 , 主机名 , 进程管理 , 相当于一个 mini的系统 2.容器 vs 虚拟机 3.Docker极速上手指南 #1.安装相关依赖. sudo yum install -y …

链表的中间节点

链表的中间节点 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/middle-of-the-…

python之AI视频去码图片修复CodeFormer,把你的老照片变漂亮

CodeFormer介绍 CodeFormer是由南洋理工大学-商汤科技联合研究中心S-Lab在NeurIPS 2022上提出的一种基于VQGANTransformer的人脸复原模型。该方法基于预训练VQGAN离散码本空间&#xff0c;改变复原任务的固有范式&#xff0c;将人脸复原任务转成Code序列的预测任务&#xff0c…

DOM 的 diff 算法

经典面试题&#xff1a; 1&#xff09;react/vue中的 key 有什么作用&#xff1f;&#xff08;key的内部原理是什么&#xff1f;&#xff09; 2&#xff09;为什么遍历列表时&#xff0c;key 最好不用 index&#xff1f; 1、虚拟dom中key的作用&#xff1a; 1&#xff09; 简…

SpringBoot新手入门完整教程和项目示例

文章目录 SpringBoot新手入门完整教程和项目示例1、SpringBoot简介2、Spring Boot的核心功能&#xff1f;&#xff08;优点&#xff09;3、SpringBoot与SpringMVC 的区别&#xff1f;4、构建SpringBoot项目4.1、在官网自动生成下载spring boot项目4.2、手动使用maven创建Spring…

vue中使用高德地图,根据类型显示不同点,点击出现弹框居中显示,并在可视化区域显示所有点

效果图 一、安装 vue-amap 插件 npm install vue-amap --save二、vue页面 <template> <div><ul styledisplay:flex;><liv-for"(item, index) in checkList":key"index"click"onClick(item)":class"item.checked ?…

直观全面的数据库管理 RazorSQL

RazorSQL是一款功能强大的数据库管理工具&#xff0c;适用于各种数据库系统&#xff0c;如MySQL、Oracle、SQL Server、SQLite等。它提供了一个直观的界面&#xff0c;让用户能够轻松地管理数据库&#xff0c;包括查询、编辑、创建和管理数据库对象等操作。RazorSQL还支持多种S…

使用composer生成的DMG和PKG格式软件包有何区别

在使用Composer从包源构建软件包时候&#xff0c;有两种不同类型的包&#xff1a;PKG和DMG。你知道两者之间的区别吗? 以及如何选取吗&#xff1f; 每种格式都有各自的优势具体取决于软件包的预期用途以及用于部署软件包的工具。下面我们来了解一下PKG和DMG格式的区别和用途。…

论文笔记:信息融合的门控多模态单元(GMU)

整理了GMU&#xff08;ICLR2017 GATED MULTIMODAL UNITS FOR INFORMATION FUSION&#xff09;论文的阅读笔记 背景模型实验 论文地址&#xff1a; GMU 背景 多模态指的是同一个现实世界的概念可以用不同的视图或数据类型来描述。比如维基百科有时会用音频的混合来描述一个名人…

详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

前言 在之前的文章中写过“Vue3TSElementPlus的安装和使用教程【详细讲解】”&#xff0c;但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代…

SpringBoot框架自定义解析配置项占位符(${})获取配置

一、前言 在最近项目开发中&#xff0c;有一个需求&#xff0c;针对自定义注解中字符串属性值的设置需要支持使用”${xx}“占位符获取在SpringBoot框架配置文件中配置项对应的属性值&#xff0c;而且支持多个”${xx}“标识的配置任意拼接。 二、功能实现 从实现思路上说还是…

nas-群晖docker查询注册表失败解决办法(平替:使用SSH命令拉取ddns-go)

一、遇到问题 群晖里面的docker图形化界面现在不能直接查询需要下载的东西&#xff0c;原因可能就是被墙了&#xff0c;那么换一种方式使用SSH命令下载也是可以的&#xff0c;文章这里以在docker里面下载ddns-go为例子。 二、操作步骤 &#xff08;一&#xff09;打开群晖系统…

STM32 TIM输出比较、PWM波形

单片机学习&#xff01; 目录 一、输出比较简介 二、PWM简介 三、输出比较通道 3.1通用定时器的输出比较部分电路 3.2高级定时器的输出比较部分电路 四、输出模式控制器 五、PWM基本结构 六、PWM参数计算 总结 前言 文章讲述STM32定时器的输出比较功能&#xff0c;它主…

【C++】explicit的作用 --- 2024.1.17

目录 explicit的作用结束语 explicit的作用 先看示例代码&#xff1a; class Maker { public:Maker(int n){} }; int main() {Maker m 10; }在上述代码中&#xff0c;main函数里我们实例化对象名称为m&#xff0c;并且赋值为10&#xff0c;作为有参构造函数的参数。但是实际…