vue3 给全局(每个实例) 添加公共方法

众所周知，vue3，现在不会暴露 Vue 对象给你用了！

那么该如何给 它的每个子组件实例添加公共的方法呢？

比如我们需要给每个实例添加 $axios 方法

vue2 添加的方法很简单

import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios

 vue3 添加公共方法的三种方式

第一种：使用 app.config.globalProperties 添加

import { createApp } from 'vue' import axios from 'axios' const app = createApp({ created() { console.log(this.$axios) } }) app.config.globalProperties.$axios = axios window.vm = app.mount('#root')

 第二种：使用 app.mixin 添加

import { createApp} from 'vue' import axios from 'axios' const app = createApp({ created() { console.log(this.$axios) } }) app.mixin({ methods: { $axios: axios } }) window.vm = app.mount('#root')

第三种：采用 provide, inject 方法

需要注意的是这种方法需要组建 inject 注入进组件才能使用

import { createApp } from 'vue' import axios from 'axios' const app = createApp({ inject: ['$axios'], created() { console.log(this.$axios) } }) app.provide('$axios', axios) window.vm = app.mount('#root')