Vue 3 中的 `provide` 和 `inject` 是什么？

在 Vue 3 中，provide 和 inject 是一种用于实现跨组件通信的高级特性，它们允许一个祖先组件向其所有子孙组件提供数据，而无需通过每个层级的组件逐级传递 props。这种方式特别适用于需要在多个组件之间共享状态或功能的情况，如访问全局状态、用户权限、配置信息等。

provide 和 inject 的工作原理

1. provide：一个组件可以使用 provide 选项来提供数据或方法。这些数据或方法可以被任何子组件注入，无论组件层次有多深。

2. inject：子组件可以使用 inject 选项来接收来自其祖先组件提供的数据或方法。

使用 provide 和 inject

1. 定义提供的数据或方法

在祖先组件中，使用 provide 函数来定义要提供的数据或方法。

示例代码：

<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
const isUserLoggedIn = ref(true);

provide('theme', theme);
provide('isUserLoggedIn', isUserLoggedIn);

// 也可以提供一个方法
function getUser() {
  return { name: 'John Doe' };
}

provide('getUser', getUser);
</script>

2. 在子孙组件中注入数据或方法

在子孙组件中，使用 inject 函数来注入祖先组件提供的数据或方法。

示例代码：

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

const theme = inject('theme');
const isUserLoggedIn = inject('isUserLoggedIn');
const getUser = inject('getUser');

console.log(`Current theme: ${theme.value}`); // 输出当前主题
console.log(`Is user logged in: ${isUserLoggedIn.value}`); // 输出用户登录状态
console.log(`User info:`, getUser()); // 获取用户信息
</script>

3. 在模板中使用注入的数据

你也可以在模板中直接使用注入的数据。

示例代码：

<template>
  <div>
    <p>The current theme is: {{ theme }}</p>
    <p>User logged in: {{ isUserLoggedIn }}</p>
  </div>
</template>

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

const theme = inject('theme');
const isUserLoggedIn = inject('isUserLoggedIn');
</script>

注意事项

• provide 和 inject 绑定并不是响应式的，除非你提供的是一个响应式对象，如 ref 或 reactive。
• 如果 inject 的属性在祖先组件中被删除或更改了名称，那么子孙组件中相应的绑定将会失效。
• provide 和 inject 可以在 <script setup> 中使用，也可以在 setup() 函数中使用。

总结

provide 和 inject 是 Vue 3 中用于跨组件通信的有用工具，它们允许你在组件树中传递数据或方法，而无需显式地通过每个组件。这种方式非常适合用于全局状态管理或共享功能，可以提高代码的复用性和可维护性。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情