使用app.provide()可以为Vue应用程序实例提供全局依赖注入
通过app.provide(key, value)方法,我们可以将一个值或对象注册为全局的依赖,并且可以在应用程序中的任何子组件中通过inject来获取这个依赖
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 注册全局依赖
app.provide('myData', { foo: 'bar' });
app.mount('#app');
在上述代码中,我们使用app.provide()将一个对象{ foo: 'bar' }注册为全局的依赖,其键名为myData
在应用程序中的任何子组件中,我们可以使用inject来获取这个依赖
<template>
<div>
<p>{{ myData }}</p>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
// 获取全局依赖
const myData = inject('myData');
return {
myData
};
}
};
</script>