Provide/Inject 是 Vue 3 中不太常见但非常实用的功能。它提供了一种在组件之间共享数据的方式，简化了组件之间的数据传输和通信。

通常，我们使用 props 将数据从父组件传递到子组件。 然而，当组件嵌套较深或者需要跨级数据传输时，通过 props 传递数据就会变得繁琐且多余。

在这种情况下，我们可以使用 Provide/Inject 来简化跨组件数据传输的过程。 父组件通过Provide提供数据，子组件通过Inject注入数据，实现数据共享。

ParentComponent.vue：

javascript">
<template>  <div>    <ChildComponent />  </div>
</template><script>
import { provide } from 'vue';
import { sharedData } from './sharedData';export default {  components: {   ChildComponent  },  setup() {    provide('sharedData', sharedData);  }};</script>

ChildComponent.vue：

javascript"><template>  <div>   <GrandchildComponent />  </div>
</template><script>import { inject } from 'vue';
export default {  components: {    GrandchildComponent  },  setup() {    const sharedData = inject('sharedData');console.log(sharedData);return {      sharedData    };  }
};
</script>

在上面的代码中，父组件ParentComponent使用provide提供名为sharedData的数据，其值来自sharedData对象。 子组件ChildComponent使用inject来接收sharedData并利用组件内的共享数据。

通过使用 Provide/Inject，我们可以在组件之间共享数据，而不需要繁琐的 prop 传递。 这简化了代码并提高了组件之间的通信效率。