vue,provide和inject，备忘

guohun012024-03-10 21:31

在Vue.js应用中，provide 和 inject 是一对API，用于实现组件间的跨层级依赖注入。provide 在父组件中定义要向下传递的属性或方法，而 inject 在子组件中声明它需要从祖先组件那里注入的属性。

具体到您的例子：

javascript 复制代码

// 在根组件或任意中间组件中提供数据
const app = createApp({...});
app.provide('appProvided', 'value'); // 在Vue 3中，可能是app.config.globalProperties.provide(...)
// 或在setup函数中
setup() {
  provide('appProvided', 'value');
}

// 在子组件或孙子组件中注入并使用这个数据
export default {
  setup() {
    const appProvided = inject('appProvided');
    console.log(appProvided); // 输出: 'value'
    // 现在可以在子组件中使用appProvided变量了
  }
}

这意味着通过在应用或某个祖先组件中调用 provide('appProvided', 'value')，任何在其下的子孙组件都可以通过 inject('appProvided') 来获得这个值 'value'。

这种方法特别适合于全局状态管理或者需要跨越多层嵌套关系的组件之间传递数据。不过要注意的是，Vue官方推荐在大型项目中使用Vuex进行状态管理，而非过度依赖于 provide 和 inject，因为它可能导致组件间的耦合度增加，影响代码的可读性和可维护性。