Vue3中Provide和Inject的用法及工作原理详解

在Vue3中，provide 和 inject 是一对用于实现依赖注入的API。它们主要用于在组件树中跨层级传递数据，避免了通过 props 逐层传递的繁琐操作。本文将详细介绍 provide 和 inject 的用法、工作原理以及实际应用场景。

什么是Provide和Inject？

• provide：在父组件中提供数据，使其对子孙组件可用。
• inject：在子孙组件中注入父组件提供的数据。

通过 provide 和 inject，我们可以实现跨层级的数据传递，而无需通过 props 逐层传递。

基本用法
1. 在父组件中使用 provide
在父组件中，通过 provide 提供数据。provide 可以是一个对象或函数。

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import {
    provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
   
  components: {
   
    ChildComponent,
  },
  setup() {
   
    // 提供数据
    provide('message', 'Hello from Parent!');
  },
};
</script>

2. 在子组件中使用 inject
在子组件中，通过 inject 注入父组件提供的数据。

<template>
  <div>
    <p>{
   {
    message }}</p>
  </div>
</template>

<script>
import {
    inject }