vue3定义全局变量和全局方法(vue3新方法globalProperties)

 分类:vue教程时间:2022-07-14 07:30:52点击:

vue3定义全局变量和全局方法,我们知道了在vue2中我们挂载全局变量或方法是通过是使用Vue.prototype.$xxxx=xxx的形式来挂载,然后通过this.$xxx来获取挂载到全局的变量或者方法。

vue3定义全局变量和全局方法

但是在vue3中显然是不行滴,在setup里面我们都获取不到this,但是 别怕 vue3.x官网给我们提供了新的方法 叫:globalProperties 。添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

1、vue3定义全局变量和全局方法实例代码如下:

用法: 比如我们挂在一下我们的axios

在main.ts上

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);   
import axios from './api/axios'
app.config.globalProperties.$axios = axios;
app.use(router).use(store).mount('#app');

2、在我们页面上引用:

import { getCurrentInstance } from 'vue';
const { proxy } =getCurrentInstance();
proxy.$axios({
 url:'',
 method:'',
})
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: