Vue3中provide,inject使用

一,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中使用自定义指令
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 中实现定时任务(quartz)功能实战

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

BuildRoot配置RTL8822CE WIFIBT模块(WIFI部分)

TinkerBoard2主板自带的无线模块为RTL8822CE&#xff0c;PCIe接口 之前在风火轮下载的Linux源码编译出来的BuildRoot根文件系统没有相关的驱动文件 [rootrk3399:/]# find . -name *.ko [rootrk3399:/]# lsmod Module Size Used by Not tainted [rootrk33…

第二百七十一回

文章目录 1. 概念介绍2. 实现方法2.1 主要步骤2.1 注意事项 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何加载网络图片"相关的内容&#xff0c;本章回中将介绍如何加载本地图片.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在上一章回…

Scrum敏捷研发管理解决方案

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新…

力扣刷MySQL-第一弹(详细解析)

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…

C++学习笔记(四十二):c++ 结构化绑定

本节介绍c结构化绑定&#xff0c;改知识点是c17中增加的新特性&#xff0c;主要是用来处理c多返回值的问题。 原来c17之前返回多个值的方法之前专门有一节内容在描述&#xff0c;简单回顾一下原来使用tuple返回多个返回值的方法&#xff0c;代码如下&#xff1a; #include &l…

条件风险价值CVaR内容介绍(MATLAB例程)

在对微电网优化调度过程中&#xff0c;由于新能源机组出力和负荷的不确定性&#xff0c;若采用确定性的优化调度方案会存在一定的风险。当风电和光伏输出功率的实际值低于预测值时&#xff0c;需要增加可控机组出力或切除部分负荷&#xff1b;反之&#xff0c;若风电和光伏输出…

Mybatis----面向接口

让mybatis自动生成dao层接口的实现类 这是dao层接口的实现类&#xff0c;在mybatis中我们可以省略这种实现接口的方式&#xff0c;直接面向接口操作数据库&#xff0c;mybatis可以帮我们自动生成接口的实现类&#xff0c;也就是下面这个实现类mybatis帮我们生成了。 1、修改se…

如何提高匹配的速度

基于形状的匹配&#xff0c;改进了无数次&#xff0c;其实已经很满意了。 想起刚入门机器视觉那会儿&#xff0c;我们写的代码&#xff0c;无论c还是c#的&#xff0c;都是调用人家的函数&#xff0c;从来没想过&#xff0c;自己有一天把这些函数代替了。 那时候调用evision的…

ES 之索引和文档

本文主要介绍ES中的数据组成结构单元。 一、文档(Document) 1、概念 ES的数据存储单元是面向文档的&#xff0c;文档是所有数据存储&#xff0c;搜索的最小单元。 你可以把ES中的文档对应成mysql中的一条条数据记录。到时候你存进ES的数据就是一个个文档。 文档存入ES是序列…

读书笔记:单载波频域均衡技术 SC-FDE

原文&#xff1a;https://mp.weixin.qq.com/s?__bizMzU5NzgxNDgwMg&mid2247486891&idx1&sn51e0dc3d28bcf356126dc8ae922f5533&chksmfe4cf6d6c93b7fc0237d4e2107b5671a401db8ed7a8527159ef18333d2b1f48c56b381f846ae&mpshare1&scene1&srcid0117h6K…

Windows Redis图形客户端 Another Redis Desktop Manager的简单使用教程

1、 Redis官方文档 2、 Redis国内中文版文档 3、 Redis客户端 Another Redis Desktop Manager 4、连接redis服务 我直接使用的是公司搭建好的服务。连接服务需要以下几个信息&#xff1a; HostPortPasswordSSL 5、New Key 5.1 如何创建一个Key&#xff1f; 点击New k…

《SPSS统计学基础与实证研究应用精解》视频讲解:SPSS中用到的概率分布

《SPSS统计学基础与实证研究应用精解》2.2 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解2.2节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手教会使…

Vue3的使用

一 Vue3的变化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API&#…

2024年华数杯国际赛B题:光伏发电功率 思路模型代码解析

2024年华数杯国际赛B题&#xff1a;光伏发电功率&#xff08;Photovoltaic Power&#xff09; 一、问题描述 中国的电力构成包括传统能源发电&#xff08;如煤、油和天然气&#xff09;、可再生能源发电&#xff08;如水电、风能、太阳能和核能&#xff09;以及其他形式的电力…

Redis 服务器 命令

目录 1.Redis Client Pause 命令 - 在指定时间内终止运行来自客户端的命令简介语法可用版本: > 2.9.50返回值: 返回 OK。如果 timeout 参数是非法的返回错误。 示例 2.Redis Debug Object 命令 - 获取 key 的调试信息简介语法可用版本: > 1.0.0返回值: 当 key 存在时&…

企业微信无法正常启动 报错0xc0000142

报错内容如下&#xff0c;每次打开工作电脑时候企业微信一般会正常启动&#xff0c;但是有时候经常会出现下面这种错误&#xff0c;重启也解决不了&#xff0c;每次都得重装企业微信&#xff0c;今天整理了一下网上的方法&#xff0c;这个原因大概率是亿赛通。 解决办法&#x…

刷题总结1.17 下午

第五题的平面图&#xff0c;偶图不理解 第三题为什么使用克鲁斯卡尔算法&#xff1f; 旅行商问题&#xff08;Traveling Salesman Problem&#xff0c;TSP&#xff09;是一个著名的组合优化问题&#xff0c;描述的是一个旅行商要在给定的一系列城市之间找到最短的路径&#xff…

jmeter根据公钥base64对明文密码进行rsa加密

在登录时遇到加密是比较常见的场景&#xff0c;也为安全一般是从服务器动态获取公钥&#xff0c;再根据公钥对密码明文进行rsa加密&#xff0c;做为密码再进行登录使用。所以需要对输入的密码进行处理&#xff0c;即在登录接口中添加前置JSR223进行处理&#xff0c;如下图所示&…

08- OpenCV:形态学操作(膨胀与腐蚀 、提取水平与垂直线)

目录 前言 一、膨胀&#xff08;Dilation&#xff09;与 腐蚀&#xff08;Erosion&#xff09; 二、形态学操作 1、开操作&#xff08;Opening&#xff09; 2、闭操作&#xff08;Closing&#xff09; 3、形态学梯度&#xff08;Morphological Gradient&#xff09; 4、…