vue2 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 可以是一个对象，也可以是一个返回对象的函数。在这个例子中，我们通过 provide 提供了一个名为 message 的字符串。

2. inject:

   • 在子组件中使用 inject 选项来注入父组件提供的数据或方法。
   • inject 是一个数组，包含需要注入的属性名。在这个例子中，我们在子组件中注入了 message 属性，并在模板中直接使用它。

通过这种方式，父组件可以向其所有子孙组件传递数据或方法，而不需要通过层层传递 props。