vue provide inject

// 父组件 ParentComponent.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from parent!'
    };
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

解释说明

1. provide:

   • 在父组件中，provide 选项用于提供数据或方法给其所有子孙组件。
   • provide 返回的对象中的属性可以在所有子孙组件中通过 inject 来注入使用。

2. inject:

   • 在子组件中，inject 选项用于注入来自祖先组件的属性。
   • 在上面的例子中，子组件通过 inject 获取了父组件提供的 message 属性，并在模板中直接使用它。

3. 父子组件关系:

   • 父组件通过 provide 提供了一个名为 message 的属性，值为 'Hello from parent!'。
   • 子组件通过 inject 注入了这个 message 属性，并在模板中显示出来。

这种方式可以简化跨层级组件之间的通信，特别是在多层嵌套组件的情况下。