Vue3全局依赖注入

457 阅读1分钟

使用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>