Vue3全局属性app.config.globalProperties的实现
更新时间：2024年01月15日 10:24:08 作者：小马甲丫
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下
一、概念
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。点击【前往】访问官网
二、实践
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>
三、最后
到此这篇关于Vue3全局属性app.config.globalProperties的实现的文章就介绍到这了,更多相关Vue3 app.config.globalProperties内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
element中el-autocomplete的常见用法示例
这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了webpack4打包vue前端多页面项目的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了浅谈Vue 函数式组件的使用技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家介绍了Vue项目中引入ESLint插件校验代码避免代码错误的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue 中 scoped 样式作用域的规则，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下2017-09-09
在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下2022-12-12
动态路由可以根据不同用户登录获取不一样的路由层级,可随时调配路由,下面这篇文章主要给大家介绍了关于vue实现动态路由的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了vue2使用eventbus踩坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论