首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 app.config.globalProperties

Vue3全局属性app.config.globalProperties的实现

2024-01-15 10:24:09 作者：小马甲丫

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！