如何在Vue3中使用provide和inject进行依赖注入

在Vue3中，可以使用provide和inject来实现跨组件的数据传递，类似于React的上下文(Context)特性。

以下是一个简单的例子：

1. 父组件（提供数据）：

<template>
  <ChildComponent />
</template>
 
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const data = '这是父组件的数据';
    provide('parentData', data);
  }
};
</script>

2. 子组件（注入数据）：

<template>
  <div>{{ parentData }}</div>
</template>
 
<script>
import { inject } from 'vue';
 
export default {
  setup() {
    const parentData = inject('parentData');
    return { parentData };
  }
};
</script>

在这个例子中，父组件使用provide函数提供了一个名为'parentData'的数据，子组件通过inject函数获取这个数据并在模板中展示。这样，父组件可以向下传递数据而不需要通过props，从而简化了组件间的耦合。