在 Vue.js 中，provide 和 inject 是一对用于实现跨组件传递数据的 API，特别适用于深层嵌套的组件结构，可以有效避免使用过于繁琐的 prop 逐层传递。以下是一个详细的例子，展示如何使用 provide 和 inject：

场景描述

假设我们有一个应用，其中包含一个祖父组件、一个父组件和一个子组件。我们希望祖父组件能够提供一个数据（比如用户的名称），父组件虽然不需要这个数据，但需要将其传递给子组件。

组件结构

• GrandParent.vue - 祖父组件，提供数据。
• Parent.vue - 父组件，中间组件，不使用但传递数据。
• Child.vue - 子组件，消费数据。

实现步骤

1. GrandParent.vue

在祖父组件中，我们使用 provide 函数来定义要提供给后代组件的数据。

<template>
  <div>
    <h1>GrandParent Component</h1>
    <Parent />
  </div>
</template>

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

const userName = 'John Doe';
provide('userName', userName);
</script>

在这里，provide('userName', userName) 创建了一个可以被任何后代组件使用的 userName 数据。

2. Parent.vue

父组件不需要对提供的数据做任何处理，只需要引入子组件。

<template>
  <div>
    <h2>Parent Component</h2>
    <Child />
  </div>
</template>

<script setup>
import Child from './Child.vue';
</script>

3. Child.vue

在子组件中，我们使用 inject 函数来接收从祖父组件提供的数据。

<template>
  <div>
    <h3>Child Component</h3>
    <p>Received user name: {{ userName }}</p>
  </div>
</template>

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

const userName = inject('userName');
</script>

在这里，inject('userName') 用于接收由祖父组件提供的 userName 数据。

小结

通过使用 provide 和 inject，Vue.js 允许开发者在组件树中的任意位置安全地传递数据，而不必将数据一层一层地手动传递下去。这种方法非常适合于复杂的组件结构，可以大大简化数据传递的逻辑和提高代码的可维护性。

看看其他：

• 创建一个使用 Vite 框架的初始化 Vue 项目(vue3)
  
• 使用 Vue 3 构建单页应用示例(vue-router)
  
• 指定vue3的构建输出目录
  
• 修改构建后的Vue中资源文件的前缀
  
• Vue3使用Vuex管理用户的登录状态和用户信息