持续更新中 …
vue3.x 如何注册全局组件/方法(替代vue2.x的Vue.prototype)
比如将 axios 等第三方组件, 进行全局注册,方便全局中使用。
Vue 2 中,一般可以定义在 Vue 原型上:
// main.js
import Vue from 'vue';
import App from './App';
import axios from 'axios';
Vue.prototype.$axios = axios
//...
然后就可以在任何 Vue 实例中使用类似 this.$axios.get 的方法。
Vue3 中,
(一)利用 config.globalProperties(不推荐):
// main.js
const app = createApp({})
app.config.globalProperties.$axios = axios
Vue3 中没有 this ,getCurrentInstance 支持访问内部组件实例。在组件中,通过getCurrentInstance().appContext.config.xxx 获取并调用:
import { onMounted, getCurrentInstance } from 'vue';
onMounted(() => {
getCurrentInstance().appContext.config.$axios
});
getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。
可见:官方反对我们这样使用 getCurrentInstance,可以采取以下方式:
(二)利用 provide / inject (✨推荐):
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.provide('$axios', axios)
app.mount('#app');
组件中,通过 inject 获取并调用:
import { onMounted, inject } from 'vue';
onMounted(() => {
const http = inject('$axios')
http.get()
// ...
});