Vue3全局属性app.config.globalProperties

news2024/12/25 0:03:38

文章目录

  • 一、概念
  • 二、实践
    • 2.1、定义
    • 2.2、使用
  • 三、最后

一、概念

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。点击【前往】访问官网

二、实践

2.1、定义

main.ts文件中设置app.config.globalPropertie

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import Pagination from '@/components/Pagination/index.vue';

const app = createApp(App);

//全局方法
app.config.globalProperties.$type = '类型';

app.component('Pagination', Pagination)
app.use(router);
app.use(ElementPlus);
app.mount('#app');

2.2、使用

Vue文件中使用getCurrentInstance(),通过proxy.$type就可以调用上面定义的方法

<template>
    <el-input v-model="proxy.$type" />
<template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
console.log(proxy.$type)
</script>

三、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

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

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

相关文章

.NET国产化改造探索(二)、银河麒麟安装人大金仓数据库

随着时代的发展以及近年来信创工作和…废话就不多说了&#xff0c;这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来&#xff0c;看操作。 上一篇介绍了如何安装银河麒麟操作系统&#xff0c;这篇文章详细介绍下如何在银河麒麟操作系统上安装人大金仓数据库。 准备安…

LangChain.js 实战系列:搭配 LangSmith 实现调试、监控、测试

&#x1f4dd; LangChain.js 是一个快速开发大模型应用的框架&#xff0c;它提供了一系列强大的功能和工具&#xff0c;使得开发者能够更加高效地构建复杂的应用程序。LangChain.js 实战系列文章将介绍在实际项目中使用 LangChain.js 时的一些方法和技巧。 LangSmith 是 LangCh…

RK3568平台开发系列讲解(Linux系统篇)PWM系统编程

🚀返回专栏总目录 文章目录 一、什么是PWM二、PWM相关节点三、PWM应用编程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 PWM 的系统编程。 一、什么是PWM PWM,即脉冲宽度调制(Pulse Width Modulation)

2023年下半年信息系统项目管理师考试

目录 引言 结果 论文 案例分析 综合知识 总结 引言 2023年下半年参加了信息系统项目管理师考试&#xff0c;考试结果情理之中&#xff0c;意料之外。论文压线&#xff0c;综合和案例差一分。从个人参加考试的整个过程来看&#xff0c;属于历史性的突破。以本文&#xff…

稳定币记录

稳定币&#xff1a; 稳定币&#xff08;Stablecoin&#xff09;是一种加密货币&#xff0c;其设计目的是维持相对稳定的价值&#xff0c;通常与某种法定货币&#xff08;如美元、欧元&#xff09;或其他资产&#xff08;如黄金&#xff09;挂钩。稳定币通过将加密货币与相应的…

详解Vue3中的鼠标事件mousemove、mouseover和mouseout

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。 目录 一、mousemove——鼠标移动事件二、mouseover——鼠标移入事件三、mouseout——鼠标移出事件 下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。 一、mousemove——鼠标移动事件 鼠…

DevC++ easyx实现视口编辑--像素绘图板与贴图系统

到了最终成果阶段了&#xff0c;虽然中间有一些代码讲起来没有意思&#xff0c;纯靠debug,1-1解决贴图网格不重合问题&#xff0c;这次是一个分支结束。 想着就是把瓦片贴进大地图里。 延续这几篇帖子&#xff0c;开发时间也从2023年的4月16到了6月2号&#xff0c;80小时基本…

【K8S 部署】基于kubeadm搭建Kurbernetes集群

目录 一、基本架构 二、环境准备: 三、安装部署 1、所有节点安装docker 2、、所有节点安装kubeadm&#xff0c;kubelet和kubectl 3、配置网络--flannel 4、测试 pod 资源创建 四、安装部署与k8s集群对接的Harbor仓库 五、Dashboard安装部署&#xff1a; 一、基本架构…

jupyter notebook打开其他盘的文件

jupyter notebook打开其他盘文件 打开jupyter notebook打开terminal输入&#xff1a;jupyter-notebook 路径打开你想打开的工程的文件 打开jupyter notebook 打开terminal 输入&#xff1a;jupyter-notebook 路径 打开你想打开的工程的文件

【中小型企业网络实战案例 六】配置链路聚合

相关文章学习&#xff1a; 【中小型企业网络实战案例 五】配置可靠性和负载分担 热门IT课程【视频教程】&#xff08;思科、华为、红帽、oracle等技术&#xff09;https://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 当CORE1或者CORE2的上…

【Elasticsearch源码】 分片恢复分析

带着疑问学源码&#xff0c;第七篇&#xff1a;Elasticsearch 分片恢复分析 代码分析基于&#xff1a;https://github.com/jiankunking/elasticsearch Elasticsearch 8.0.0-SNAPSHOT 目的 在看源码之前先梳理一下&#xff0c;自己对于分片恢复的疑问点&#xff1a; 网上对于E…

微服务雪崩问题及解决方案

雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 微服务之间相互调用&#xff0c;因为调用链中的一个服务故障&#xff0c;引起整个链路都无法访问的情况。 如果服务提供者A发生了故障&#xff0c;当前的应用的部分业务…

机器学习(二) -- 数据预处理(2)

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 未完待续…… 目录 系列文章目录 前言 四、【数…

7、InternVL

简介 github demo 使用网络获取的油画图片&#xff0c;InternVL识别还算可以。 使用stable diffusion生成的图片&#xff0c;InternVL能很好的识别。 权重 huggingface地址 模型搭建 github地址 下载源码 git clone https://github.com/OpenGVLab/InternVL.git创建环…

提高软件测试效率:Mock 测试实战教程

在软件工程的套路中&#xff0c;虚拟化测试&#xff0c;又称 Mock 测试&#xff0c;扮演一个无可或缺的角色。Mock 测试允许工程师仿制和操控对象、服务或者系统组件等的行为&#xff0c;使得人们能在一个干净独立的环境里测试特定功能。这种方法能确保测试聚焦于代码逻辑&…

RocketMQ源码解析-主从同步原理(HA)

1、关键组件 主从同步的实现逻辑主要在HAService中&#xff0c;在它的构造函数中实例化了几个对象同时在start()方法内执行启动&#xff1a; public class HAService {public HAService(final DefaultMessageStore defaultMessageStore) throws IOException {this.defaultMes…

如何本地快速部署Apache服务器并使用内网穿透工具实现公网访问内网服务

文章目录 前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpolar web ui管理界面3.2 创建公网地址 4. 固定公网地址 前言 Apache作为全球使用较高的Web服务器…

Python零基础入门技能学习,实现办公自动化与数据分析

一、教程描述 Python零基础入门&#xff0c;写下你的第一行人工智能代码&#xff0c;Python实现办公自动化&#xff0c;这是比同事早下班2小时的技能&#xff0c;Python实现网络爬虫&#xff0c;用Python抓取网页信息提升职场竞争力&#xff0c;Python实现数据分析&#xff0c…

使用 go-elasticsearch v8 基本请求

使用 go-elasticsearch 请求示例 你可以通过参考Go 官方文档找到简单的示例&#xff0c;所以我认为先看看这个是个好主意。 连接客户端有两种方式&#xff0c;如下图。 至于两者的特点&#xff0c;TypedClient有类型&#xff0c;更容易编写&#xff0c;但文档较少。另外&…

jdk更改版本

要改三个地方 1、pom.xml里 2、File -> Project Structure -> Project File -> Project Structure -> Modules 3、File -> Settings -> targrt bytecode设为1.8