vue3 provide inject用法

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

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent!');

    // 使用 provide 提供数据给子组件
    provide('message', message);

    return {
      message
    };
  }
};
</script>

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

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 使用 inject 接收父组件提供的数据
    const message = inject('message');

    return {
      message
    };
  }
};
</script>

解释说明：

1. provide：在父组件中使用 provide 函数，可以将数据或方法提供给所有子组件。这里我们将一个 ref 类型的变量 message 提供给子组件。
2. inject：在子组件中使用 inject 函数，可以接收父组件通过 provide 提供的数据或方法。这里我们在子组件中接收了 message 并在模板中显示它。

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