vue中inject 和 provide的用法

发布时间:2023年12月05日评论数：抢沙发阅读数： 1025

在 Vue 中，inject 是一种向下级组件注入依赖的机制。它允许你在父组件中提供一个值，然后在子组件中使用 inject 来接收该值，无论子组件嵌套多深，都可以访问该值。

下面是一个示例，演示了如何使用 inject 和 provide 在父组件中注入一个值，并在子组件中使用它：

<!-- 父组件 -->

<template>

 <div>

   <ChildComponent />

 </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

 components: {

   ChildComponent

 },

 provide: {

   message: 'Hello from Parent'

 }

};

</script>

<!-- 子组件 -->

<template>

 <div>

   <p>{{ injectedMessage }}</p>

 </div>

</template>

<script>

export default {

 inject: ['message'],

 computed: {

   injectedMessage() {

     return this.message;

   }

 }

};

</script>

在上面的例子中，父组件通过 provide 选项提供了一个名为 message 的值，其值为字符串 'Hello from Parent'。然后在子组件中，使用 inject 选项声明要注入的依赖项，这里是 ['message']。子组件通过 this.message 访问到了父组件提供的值，并将其显示在模板中。

需要注意的是，provide 和 inject 是成对使用的，父组件通过 provide 提供值，子组件通过 inject 接收值。父组件可以提供多个值，子组件可以一次性接收多个值。在父子组件之间，可以通过 provide 和 inject 进行非响应式的数据传递。

这种注入机制在一些特定的场景下非常有用，例如在多级嵌套的组件中共享配置、主题或其他共享的非响应式数据。