Vue3 使用provide/inject或者config.globalProperties,代替了Vue.prototype
1. provide/inject (适用于组合式/选项式API)
provide
import axios from 'axios';
const app = Vue.createApp(App);
app.provide('$axios', axios); // 在app的所有子组件中都可使用
inject
// 组合式API中使用
<script setup>
const { inject } = Vue;
const $axios = inject('$axios'); // 组件注入全局变量
</script>
// 选项式API中使用
<script>
export default {
inject: ['$axios'],
...
}
</script>
2.globalProperties (适用于选项式API)
import axios from 'axios';
const app = Vue.createApp(App);
app.config.globalProperties.$axios = axios;
// 选项式API中使用
<script>
export default {
mounted() {
this.$axios.get('/api/XXX', () => {})
}
...
}
</script>
附:Vue.prototype用法
Vue2 将全局变量通过绑定到Vue.prototype上,便于Vue实例获取。
```main.js
function log(msg) {
console.log('打印数据:', msg);
}
// 全局变量声明
Vue.prototype.$log = log;
<script>
export default {
mounted() {
// 读取全局变量
this.$log('component a');
}
}
</script>