Vue3之通过Vue.config.globalProperties注册全局属性

Vue3之通过Vue.config.globalProperties注册全局属性

文章目录

  • Vue3之通过Vue.config.globalProperties注册全局属性
  • 1. Vue.config.globalProperties
  • 2. 注册全局属性
    • 1. 注册方式1
    • 2. 注册方式2
  • 3. 在setup函数中获取

1. Vue.config.globalProperties

Vue2中使用Vue.prototype.自定义属性名的方式注册全局组件

使用时this.$request.login(...)

Vue3中使用Vue.config.globalProperties.自定义属性名注册全局属性,在setup中使用的时候通过getCurrentInstance()对象获取

2. 注册全局属性

  1. main.ts(or main.js)中配置全局属性
  2. vite或vue/cli环境下均适用

1. 注册方式1

直接使用Vue.config.globalProperties.自定义属性名注册全局属性

import Vue from 'vue'
import App from './App'
import request from '@/api/request.js'
Vue.config.productionTip = false
//直接使用Vue.config.globalProperties.自定义属性名
Vue.config.globalProperties.$request = request
Vue.config.globalProperties.$mytest = yuan

2. 注册方式2

实例化Vue对象后,使用对象名.config.globalProperties.自定义属性名注册全局属性

import Vue from 'vue'
import App from './App'
import request from '@/api/request.js'
Vue.config.productionTip = falseconst app = createApp(App)
//使用对名.config.globalProperties.自定义属性名
app.config.globalProperties.$request = request
app.config.globalProperties.$mytest = jinshengyuanapp.mount('#app')

3. 在setup函数中获取

<script>
import { getCurrentInstance } from 'vue'
export default {
components: {},
setup() {const instance = getCurrentInstance()console.log('getCurrentInstance', instance.appContext.config.globalProperties)return {}
}
}
</script>

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

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

相关文章

面向对象(精髓)变继承关系为组和关系(_Decorator模式)

在软件开发中&#xff0c;设计模式是解决常见问题的可重用解决方案。在面向对象编程中&#xff0c;继承和组合是两种常用的代码复用方式。然而&#xff0c;随着软件需求的不断变化&#xff0c;我们需要更灵活的设计方式来应对不断变化的需求。在本文中&#xff0c;我们将讨论从…

计算机网络——TCP/IP网络层次模型

计算机网络——TCP/IP网络层次模型 TCP/IP网络模型的起源TCP/IP网络层次的结构TCP/IP如何交互 TCP/IP协议栈TCP/IP协议栈主要协议 TCP/IP 和 OSI之间的区别面向连接和无连接面向连接三次握手&#xff0c;四次挥手 无连接 我们上一次了解了OSI的网络层次模型&#xff0c;如果还没…

Linux学习-内存管理

目录 内存管理 malloc free 使用 字符串存储申请堆区 自主输入个数&#xff0c;然后通过malloc在程序中申请空间&#xff0c;不用必须提前指定大小 内存溢出 内存泄漏 内存碎片 内存管理 函数名就是指向该函数的函数指针。 堆区是自低向高&#xff0c;栈区是自高向低…

代理模式的学习

1. 概念 1.代理模式是什么&#xff1f; 其实就是选一个中间人&#xff0c;可以理解为中介&#xff0c;如果要买房子&#xff0c;先和中介去商量&#xff0c;中介和房主去商量&#xff0c;这样。 2.为什么需要代理模式&#xff1f; 其实还是为了安全吧&#xff0c;代理模式中…

ffmpeg日记4001-原理介绍-视频切割原理

原理 打开输入---->打开输出---->根据输入来创建流---->拷贝流设置---->循环读帧---->判断时间点是否到达切割点&#xff0c;并做设置---->设置pts和dts---->写入---->善后 重点是pts和dts如何设置。参考《ffmpeg学习日记25-pts&#xff0c;dts概念的…

ftp速度太慢只有几十k,怎么解决?

FTP是目前许多企业日常运营中还在用的文件传输方式。虽然比较普遍&#xff0c;然而&#xff0c;许多用户在使用FTP时经常遇到速度缓慢的问题&#xff0c;有时甚至只有几十KB/s。这不仅影响工作效率&#xff0c;还可能导致许多数据传输的延迟的问题。本文将探讨FTP速度慢的原因&…

计算机服务器中了faust勒索病毒怎么解密,faust勒索病毒解密工具流程

在互联网飞速发展的今天&#xff0c;越来越多的企业走向了数字化办公模式&#xff0c;许多企业开始利用网络计算机开展各项工作业务&#xff0c;网络也为企业的生产效率提供了极大便利&#xff0c;但网络中存在许多恶意威胁。近日&#xff0c;云天数据恢复中心接到许多企业的求…

关于一个数组的小细节

机缘 写一个矩阵转置的代码用到了数组 收获 了解到输入数组的大小要在数组前面而不能先定义数组然后再输入 举例 #include <stdio.h>int main() {int a, b;scanf("%d %d ",&a,&b);int arr[a][b];for(int i 0;i < a;i){for(int j 0;j < b…

记录启动Dubbo-admin遇到的问题

记录启动Dubbo-admin遇到的问题 dubbo-admin-ui 下载node_modules出现镜像问题打工程包时出现错误运行jar包时出现连接不上注册中心 dubbo-admin-ui 下载node_modules出现镜像问题 进行dubbo-admin-ui打包操作是在2024-03-11&#xff0c;原域名链接: https://registry.npm.tao…

Java 学习和实践笔记(34):对象的转型(casting)

对象的转型&#xff08;casting)有两种&#xff0c;一种是向上转型&#xff0c;一种是向下转型。 向上转型&#xff1a;父类引用指向子类对象。这属于自动类型转换&#xff0c;编译器会自动完成。 上一节的多态中&#xff0c;形参为父类Animal, 但是调用时实参为子类对象Dog&…

linux中查看并修改日期

1.如何在终端控制行界面显示并且调整日期&#xff1a; 显示当前日期&#xff1a; 2.显示当前年份&#xff1a; 3.显示当前月份&#xff1a; 4.显示当前天数&#xff1a; 5.显示到目前为止的天数&#xff1a; 6.显示日期&#xff1a; date “%x“ ≈ date ”%Y %m %d"…

09-设计模式 面试题

你之前项目中用过设计模式吗? 工厂方法模式分类 简单工厂模式工厂方法模式抽象工厂模式工厂模式 需求:设计一个咖啡店点餐系统。 设计一个咖啡类(Coffee),并定义其两个子类(美式咖啡【AmericanCoffee】和拿铁咖啡【LatteCoffee】);再设计一个咖啡店类(CoffeeStore)…

Playwright中page.locator快速查找网页元素和对象交互操作

Playwright 是一个用于自动化测试和网页操作的 Python 库&#xff0c;它提供了对浏览器的控制和操作的功能&#xff0c;包括 Chromium、Firefox 和 WebKit。使用 Playwright&#xff0c;您可以编写自动化测试、网页截图、网页数据提取以及网页交互等任务。Playwright 具有以下特…

记一次实战项目所学(通用接口篇)

记一次实战项目所学&#xff08;通用接口篇&#xff09; 1.加解密工具&#xff08;AES&#xff0c;RSA&#xff0c;MD5&#xff09; 账号登录时可用 a.引依赖 <dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactI…

一、什么是 HarmonyOS ?

HarmonyOS 是华为开发的一款面向未来的全场景分布式智慧操作系统&#xff0c;将逐步覆盖 18N 全场景终端设备。 对消费者而言&#xff0c;HarmonyOS 用一个“统一的软件系统”&#xff0c;从根本上解决消费者面对大量智能终端体验割裂的问题&#xff0c;为消费者带来统一、便利…

Kafka Stream入门

1. 什么是流式计算 流式计算&#xff08;Stream Processing&#xff09;是一种计算模型&#xff0c;旨在处理连续的数据流。与传统的批处理模型不同&#xff0c;流式计算可以实时或接近实时地处理和分析数据&#xff0c;这意味着数据在生成后不久就被处理&#xff0c;而不是存…

基于android的物业管理系统的设计与实现19.8

目录 基于android的物业管理系统的设计与实现 3 摘 要 3 Android property managemengt system 5 Abstract 5 1 绪论 6 1.1 选题背景 6 1.2 课题研究现状 6 1.3 设计研究主要内容 7 1.4 系统主要设计思想 8 2 开发环境 8 2.1 Android系统的结构 8 图2-1 Android系统架构图 9 2…

Python绘图-14绘制3D图(下)

14.7绘制3D等高线图个性化colormap 14.7.1图像呈现 14.7.2绘图代码 import numpy as np # 导入numpy库&#xff0c;numpy是Python的一个强大的数值计算扩展程序库&#xff0c;支持大量的维度数组与矩阵运算。 import matplotlib.pyplot as plt # 导入matplotlib的绘图模块p…

UDP编程及特点

目录 1.UDP编程流程 2.recvfrom()、sento() 3.代码演示 3.udp特点 1.UDP编程流程 socket()用来创建套接字&#xff0c;使用 udp 协议时&#xff0c;选择数据报服务 SOCK_DGRAM。sendto()用来发送数据&#xff0c;由于 UDP 是无连接的&#xff0c;每次发送数据都需要指定对端…

神经网络基本使用

1. 卷积层 convolution layers import torch import torchvision from torch import nn from torch.nn import Conv2d from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterdataset torchvision.datasets.CIFAR10(./dataset,trainFa…