Vue3之app.config.globalProperties(定义全局变量)

news2025/1/22 12:44:42

使用之因

    一般我们在vue开发中,常用的功能,接口等等我们都会封装起来,如何每次创建一个组件,想要使用这些封装起来的功能、接口等等都需要先引入,再通过层层调用才可以得到结果,如果我现在一遍需要调用后端接口、验证n种输入框,且这些方法都不在同一个文件当中,我们就需要不断引入,相当麻烦。所以就会想着能否将这些常用的,都存放在一块,需要调用的时候,只需要引入一个,既可得到所有分装起来的功能。

使用之果

注意:如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。

1、创建一个文件(通过useGlobelProperties获取全局属性)

useGlobelProperties.ts
  
import { ComponentInternalInstance, getCurrentInstance } from "vue";  
export default function useGlobelProperties(){
    const { appContext } = getCurrentInstance() as ComponentInternalInstance;   //🌟
    return appContext.config.globalProperties;    //🌟
}

2、在main.ts中(配置全局属性)

const app = createApp(App);
app.config.globalProperties.name = "你好";   //🌟
app.use(ElementPlus).mount("#app");

3、任意组件中的使用

//引入useGlobelProperties.ts,并将方法useGlobelProperties 解析出来
import useGlobelProperties from './useGlobelProperties'
const that = useGlobelProperties()
console.log(that)

打印所得: 

 可以看到我们上面定义的name可以拿到,后续想要什么全局配置,可以自行尝试添加($xxx)

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

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

相关文章

多旋翼物流无人机节能轨迹规划(Python代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

海外品牌推广:谷歌没收录?这些常见错误你可别犯!

你们是否曾经遇到过这样的情况:你在海外市场努力推广你的品牌,但是发现谷歌搜索结果中竟然找不到你的网站或品牌?别担心,你可能犯了一些常见的错误,让谷歌把你的品牌忽略掉了。让我们来看看这些错误,确保你…

3dsmax图纸怎么加密?

对设计行业来说,公司重要的设计图纸是一个企业非常重要的核心数据是命脉,那么具有如此重要性的3Dmax设计文件怎么才能确保文件的安全,避免竞争对手骗方案或者内部人员有意无意的泄密呢? 相信有很多老板或许都会遇到这样的问题。很…

❤️创意网页:有趣的文字冒险游戏(可以无限拓展)

✨博主:命运之光 🌸专栏:Python星辰秘典 🐳专栏:web开发(简单好用又好看) ❤️专栏:Java经典程序设计 ☀️博主的其他文章:点击进入博主的主页 前言:欢迎踏入…

图片转pdf怎么在线转?看看这几种在线转方法

图片转pdf怎么在线转?图片转PDF是一个非常常见的需求,因为在很多情况下,我们需要将一些图片文件转换为PDF文件格式,以便于传输、打印或者共享。如果你想在线转换图片为PDF文件,下面就给大家推荐几种简单实用的转换方法…

Hadoop集群运行Spark应用程序

启动Spark集群 先启动hadoop,再启动Spark,具体参考链接 对Linux系统对Spark开发环境配置_Matrix70的博客-CSDN博客 运行Spark安装好以后自带的样例程序SparkPi spark-submit --class org.apache.spark.examples.SparkPi --master spark://master:7077 examples/jars/spark…

路径规划算法:基于蛇优化优化的路径规划算法- 附代码

路径规划算法:基于蛇优化优化的路径规划算法- 附代码 文章目录 路径规划算法:基于蛇优化优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用智能优化算法…

嵌入式软件测试笔记10 | 嵌入式软件测试中如何进行安全性分析?

10 | 嵌入式软件测试中如何进行安全性分析? 1 简介2 故障模型及后果分析(FMEA)2.1 三个步骤2.2 带来的结果优势2.3 FMEA分析过程2.3.1 描述系统及其功能2.3.2 识别潜在的故障模式2.3.3 故障模式对功能的影响2.3.4 风险导致后果的原因2.3.5 风…

Prompt本质解密及Evaluation实战与源码解析(三)

9.5 Evaluation for QA源码解析 如图9-4所示,我们看一下LangChain框架对问答评估的(Evaluation for QA)的源代码。 图9- 5 LangChain的evaluation qa目录 在eval_prompt.py文件里面,主要定义了三个类 PromptTemplate,它们都是用于生成题目的模板。 Gavin大咖微信:NLP_Mat…

跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制

文章目录 📈UniApp⚡概念⚡优势⚡限制 📈Flutter⚡概念⚡优势⚡限制 📈Taro⚡概念⚡优势⚡限制 📈React Native⚡概念⚡优势⚡限制 📈跨端技术栈对比附录:「简历必备」前后端实战项目(推荐&…

强化学习快速复习笔记--待更新

目录 蒙特卡洛方法动态规划算法策略迭代 时序差分方法Sarsa算法Q-learning算法如何区分在线学习和离线学习DQN深度强化Q学习概念介绍代码解析 DQN改进算法Double DQN网络 蒙特卡洛方法 求解价值函数和状态价值函数,可以使用蒙特卡洛方法和动态规划。首先介绍一下蒙…

25-分布式事务----Seate

1、seate 官网:Seata Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。 1.1、Seata术语 TC (Transaction Coordinator) - 事务协调者…

mysql 执行sql开启事务

SHOW VARIABLES LIKE autocommit;SET autocommit 0; INSERT INTO sugar.realmauctiondatum(Id, Name) VALUES (3, A); INSERT INTO sugar.realmauctiondatum(Id, Name) VALUES (1, A); COMMIT;如果没有调用COMMIT;退出session时会执行回滚

python 面向对象之继承

文章目录 前言继承的概念单继承多继承子类重写父类的同名方法和属性子类调用父类同名的方法和属性多层继承私有权限 前言 前面我们已经学习了 python 面向对象的类和对象,那么今天我将为大家分享面向对象的三大特性之一:继承。 继承具有以下特性&#…

怎么使用文件高速传输,推荐镭速高速文件传输解决方案

​​随着互联网的发展,文件传输越来越频繁,如何实现文件高速传输已经越来越成为企业发展过程中需要解决的问题,在当今的业务中,随着与客户和供应商以及内部系统的所有通信的数据量不断增加,对 高速文件传输解决方案的需…

全网最新项目:会说话的汤姆猫直播搭建教程(附教学流程)

今天为大家分享一个 汤姆猫直播搭建项目 ,这个项目最近可以说在圈内爆火,我相信很多朋友以前应该都玩过,或者说给自己家小孩子玩过。 -------------------------------------------------------------------- 课程获取:www.yn521.cn/160852…

RabbitMQ【笔记整理+代码案例】

1. 消息队列 1.1. MQ 的相关概念 1.1.1. 什么是 MQ MQ(message queue),从字面意思上看,本质是个队列,FIFO 先入先出,只不过队列中存放的内容是message 而已,还是一种跨进程的通信机制,用于上下游传递消息…

Python应用:什么是爬虫?

文章目录 什么是爬虫虫之初,性本善?出行社交电商搜索引擎政府部门总结 面向监狱编程爬虫的君子协议什么是君子协议君子协议是怎么产生的?君子协议是什么内容?如何查看一个网站的robots协议违反君子协议的案例 参考文献 2022年初的…

装饰器模式:灵活扩展功能的设计利器

装饰器模式是一种结构型设计模式,它允许我们在不改变现有对象结构的情况下,动态地将新功能附加到对象上。本文将深入探讨装饰器模式的原理、结构和使用方法,并通过详细的 Java 示例代码来说明。 1. 装饰器模式的定义 装饰器模式是一种允许我…

Python: 如何批量预处理FY4A L1 DISK和REGC产品?(辐射定标/裁剪/GLT校正/HDF5转TIFF文件等)

目录 01 前言 1.1 想要说 1.2 Requirements 1.3 程序适用数据集 02 函数说明 2.1 读取HDF5文件某一数据集 2.2 读取HDF5文件数据集属性 2.3 对FY4A数据集进行辐射定标 2.4 基于官方地理对照表获取经纬度数据(仅适用DISK) 2.5 依据行列号计算经纬度数据(仅适用DISK) …