Vue2中在main.js中向Vue原型上挂载Vue.prototype.<自定义属性>,通过this获取;

Vue3中在main.js采用config.globalProperties.<自定义属性>,提供了 getCurrentInstance api,将其中的 proxy 解构出来,通过proxy 获取 全局属性

这里以axios为例 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import http from '@/utils/request'

const app = createApp(App)

app.config.globalProperties.$http = http //挂载全局

app.use(router).use(store).mount('#app')

组件实例中通过 getCurrentInstance 获取proxy,再获取全局挂载的实例

<template>
<el-button type="success" @click="btnClick">请求</el-button>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
setup(props, context) {
const { proxy,ctx } = getCurrentInstance()

const btnClick = () => {
proxy.$http({
url: '/user',
method: 'get'
}).then(data => {
console.log(data,'测试数据--->>>')
})
};

return {
btnClick,
};
},
};
</script>

 这个接口是用express简单写的一个测试接口,下面是打印结果Vue3中全局挂载_vue.js