有关reject和provide

在 Vue 2 中，inject 和 provide 是一对选项，用于在祖先组件和后代组件之间建立依赖关系，而不必显式地通过 props 逐层传递。这在你需要跨越多层组件传递数据时非常有用。

provide 和 inject 主要在开发高阶插件/组件库时使用。在大多数应用中，应优先使用 props 和 events 进行父子组件间的通信。

provide

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。这些属性在后代组件中可以通过 inject 来接收。

inject

inject 选项应该是：

• 一个字符串数组，或
• 一个对象，对象的 key 是本地的绑定名，value 是：
  • 在可用的注入内容中的 key (字符串或 Symbol)，或
  • 一个对象，该对象的：
    • from 属性是在可用的注入内容中的 key (字符串或 Symbol)
    • default 属性是如果不存在注入内容时应使用的默认值

使用示例

在祖先组件中：

<template>  
  <div>  
    <ChildComponent />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  name: 'AncestorComponent',  
  components: {  
    ChildComponent  
  },  
  provide() {  
    return {  
      foo: 'foo',  
      bar: 'bar'  
    };  
  }  
}  
</script>

 在后代组件中：

<template>  
  <div>  
    {{ foo }} {{ bar }}  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'ChildComponent',  
  inject: ['foo', 'bar']  
}  
</script>

 

在这个例子中，AncestorComponent 提供了 foo 和 bar 这两个属性，然后 ChildComponent 通过 inject 选项接收了这两个属性。

注意事项

• provide 和 inject 主要在开发高阶插件/组件库时使用。在大多数应用中，应优先使用 props 和 events 进行父子组件间的通信。
• 除非 provide 和 inject 是在开发可复用的插件/组件库，否则不推荐使用，因为它会使代码难以理解和测试。
• provide 和 inject 并不是响应式的。这是说，如果祖先组件的提供值发生变化，后代组件不会收到更新。如果你需要响应式的数据传递，应使用 props 和 events。