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

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

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

相关文章

【数据结构】常见八大排序算法总结

目录 前言 1.直接插入排序 2.希尔排序 3.选择排序 4.堆排序 5.冒泡排序 6.快速排序 6.1Hoare版本 6.2挖坑法 6.3前后指针法 6.4快速排序的递归实现 6.5快速排序的非递归实现 7.归并排序 8.计数排序&#xff08;非比较排序&#xff09; 9.补充:基数排序 10.总结…

Docker-基础指令

前置知识 docker官网地址&#xff1a;https://www.docker.com/ docker镜像地址&#xff1a;https://hub.docker.com/ docker安装教程&#xff1a;https://docs.docker.com/engine/install/centos/ 安装只需要注意将仓库源改为国内就好,推荐去阿里云注册自己的账号获得加速地址…

flask不使用flask-login插件

由于flask版本升级问题&#xff0c;flask-manager里面的Command命令高版本不支持&#xff0c;低版本的兼容flask-sqlalchemy启动也会报错&#xff0c;第三方插件有很多问题&#xff0c;所以痛定思痛决定放弃使用这个&#xff0c;使用flask自带语法自己写一个 类似于django继承…

保送阿里云的云原生学习路线

近期好多人都有咨询学习云原生有什么资料。与其说提供资料不如先说一说应该如何学习云原生。 Linux基础知识&#xff1a;云原生技术通常在Linux环境中运行&#xff0c;因此建议首先掌握Linux的基础知识&#xff0c;包括命令行操作、文件系统、权限管理等。 容器化技术&#x…

CentOS将磁盘剩余空间分配到已有分区

CentOS将磁盘剩余空间分配到已有分区 引growpartresize2fs 引 手里有台云服务&#xff0c;之前磁盘只有60G&#xff0c;在执行SQL语句时报错No space left on device. 通过df -h查看磁盘占用情况&#xff0c;确实所剩无几了 通过云服务后端控制台升级了下配置&#xff0c;将…

【管理篇 / 升级】❀ 13. FortiOS 7.4固件升级新规则 ❀ FortiGate 防火墙

【简介】飞塔防火墙的固件升级一直是所有厂家中最好的。只要有注册官方帐号&#xff0c;有注册设备&#xff0c;并且只要有一台设备在服务期内&#xff0c;即可下载所有型号的所有版本的固件。即使其它设备服务期已过&#xff0c;也可以通过固件文件手动升级&#xff0c;避免防…

STM32之OLED显示

一、模块介绍 1、常见的显示设备 LED、数码管、点阵、LCD屏(1602/12864)、OLED屏(消费电子) 2、OLED屏的概述 OLED&#xff0c;即有机发光二极管&#xff08;Organic Light-Emitting Diode&#xff09;&#xff0c;又称为有机电激光显示&#xff08;Organic Electroluminesenc…

单元测试基本概念

单元测试一般是开发来做的&#xff0c;但是因为业务需要也曾涉及过单元测试。目前就单元测试的基础概念做下总结。 一、 单元测试定义&#xff1a; 单元测试是软件开发中的一种测试方法&#xff0c;用于验证程序中的最小可测单元——即代码中的单个函数、方法或模块。单元测试…

SAP PI/PO 运行ESR报错:无法验证证书,将不执行该应用程序

java.security.cert.CertificateException: java.security.cert.CertPathValidatorException: OCSP 运行ESR报错 解决方案&#xff1a; 1. 打开控制面板&#xff0c;找到JAVA 这个时候就可以正常打开ESR了

如何在CentOS 7 中搭建Python 3.0 环境

1、下载 通过https://www.python.org/ftp/python/下载Python安装包&#xff0c;这里下载Python-3.10.9.tgz&#xff1b; 2、上传 借助MobaXterm等工具将Python安装包上传至/opt目录&#xff1b; 3、解压 将JDK压缩文件解压至/opt目录&#xff1a;tar -xvf /opt/Python-3.1…

【从浅到深的算法技巧】构造函数,实例方法

1.2.3抽象数据类型的实现 和静态方法一样&#xff0c;我们也需要使用Java的类(class )实现抽象数据类型并将所有代码放入一个和类名相同并带有java扩展名的文件中。文件的第一部分语句会定义表示数据类型的值的实例变量。它们之后是实现对数据类型的值的操作的构造函数和实例方…

2024年第二届“华数杯”国际大学生数学建模竞赛 (A题 MCM)| 废水扩散分析 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看华数杯的A题&#xff01; 完整内容可以在文章末…

zabbix-api

一、API官方文档 https://www.zabbix.com/documentation/4.0/zh/manual/api https://www.zabbix.com/documentation/5.0/zh/manual/api 二、使用示例 1、获取zabbix token curl -s -X POST http://192.168.1.1/zabbix/api_jsonrpc.php -H Content-Type: application/json-rp…

机器学习算法 - 马尔可夫链

马尔可夫链&#xff08;Markov Chain&#xff09;可以说是机器学习和人工智能的基石&#xff0c;在强化学习、自然语言处理、金融领域、天气预测、语音识别方面都有着极其广泛的应用 > The future is independent of the past given the present 未来独立于过去&#xff…

java SECS管理系统 将逐步推出 SECS 客户端(Passive) 管理系统 SECS快速开发平台 springboot secs开发平台

SECS管理系统 这是一套SECS客户端(Passive)&#xff0c;可以直接连接PLC设备,支持Modbus、三菱MC、欧姆龙Fine、OPC-UA、西门子S7设备等通信。 企业已经有了EAP软件&#xff0c;但是设备没有SECS通信功能&#xff0c;这时候可以使用这套框架&#xff0c;直接连接设备&#xff…

GEE使用

【GEE】Google Earth Engine&#xff08;GEE&#xff09;注册详细教程&无需教育邮箱-CSDN博客 数据下载代码 // Map the function over 3 months of data and take the median. // Load Landsat-8 surface reflectance data.var landsat8 ee.ImageCollection("LAND…

vue3和vue2区别

响应式区别 在 Vue 2 中&#xff0c;使用了 Object.defineProperty 来实现数据的响应式。它通过逐个定义对象属性的方式来进行数据的劫持和监听。这种方式存在一些限制&#xff0c;例如无法监听新增的属性&#xff0c;需要使用 Vue 提供的 $set 方法来实现响应式。此外&#x…

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

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

STM32面试体验和题目

目录 一、说一下你之前的工作主要干了什么&#xff1f; 二、stm32有关的知识点 1.stm32的外设有哪一些 2.你的毕业论文的项目里面是怎么设计的 三&#xff0c;C语言的考察 1.写一个结构体&#xff08;结构体的内容自由发挥&#xff09; 2.写一个指针型的变量 3.结构体是…

C语言经典算法之快速排序算法

目录 前言 1. 快速排序简介 2. 快速排序的基本原理 2.1 选择基准元素 2.2 分割操作 2.3 递归排序 3. C语言中的快速排序实现 4. 总结 前言 快速排序算法可以分为两部分来看&#xff1a; 第一部分&#xff1a;将枢轴元素移动到最终位置 第二部分&#xff1a;分别处理枢轴…