在 Vue 3 中，provide 和 inject 是跨组件通信的强大工具。它们允许我们在组件树的高层提供数据，并在任何后代组件中使用这些数据。这种机制在 Vue 3 的设计中提供了一种比传统 props 和 events 更简洁、有效的方式来管理组件之间的关系。
基本概念
provide 和 inject 的作用
provide：在祖先组件中使用，允许你定义需要传递给子孙组件的数据。inject：在子组件中使用，允许你接收祖先组件通过provide提供的数据。
使用场景
- 避免 Props 传递层层嵌套： 当组件树很深时，使用
provide和inject可以避免繁琐的 props 传递。比如在多层级的组件树中，只需在高层组件中provide数据，所有子孙组件都可以通过inject直接访问这些数据。 - 插件和库开发： 开发 Vue 插件或库时，可以使用
provide和inject来提供全局配置或工具函数。例如，插件可以通过provide提供服务，而其他组件可以通过inject使用这些服务。 - 状态共享： 对于简单的状态共享，
provide和inject是一种轻量级的解决方案。虽然 Vuex 是官方推荐的状态管理库，但对于某些场景，provide和inject提供了简便的替代方案。
基本用法
1. 提供数据
在祖先组件中使用 provide 提供数据。可以通过 provide 提供任何类型的值，包括对象和函数：
<script setup>
import { provide } from 'vue';
provide('key', 'value');
</script>
2. 注入数据
在后代组件中使用 inject 接收数据：
<script setup>
import { inject } from 'vue';
const value = inject('key');
</script>
进阶用法
1. 提供多个值
可以通过对象形式一次性提供多个值：
<script setup>
import { provide } from 'vue';
provide('data', {
message: 'Hello',
count: 42
});
</script>
在子组件中，使用 inject 获取对象并访问其属性：
<script setup>
import { inject } from 'vue';
const data = inject('data');
const message = data.message;
const count = data.count;
</script>
2. 动态提供数据
提供函数而非静态值，允许动态更新数据：
<script setup>
import { provide, ref } from 'vue';
const count = ref(0);
provide('count', () => count.value);
</script>
在子组件中，使用 inject 获取函数并计算最新值：
<script setup>
import { inject, computed } from 'vue';
const countFn = inject('count');
const count = computed(() => countFn());
</script>
注意事项
- 响应式数据：注入的数据会是响应式的，但如果提供的是对象或数组，修改其内部属性或元素不会自动触发子组件更新。需要确保数据的响应性。
- 跨层级通信：
provide和inject适合用于跨越多个层级的数据传递。它们提供了比传统 props 更灵活的数据传递方式，但也需要注意数据来源和传递路径。
总结
Vue 3 的 provide 和 inject 是强大的跨组件通信工具，适用于减少层层传递的繁琐，简化全局配置管理，以及实现组件之间的轻量级数据共享。合理使用这些机制，可以让组件之间的关系更加清晰和灵活。
