Vue 3 中的 provide 和 inject 跨组件通讯

在 Vue 3 中，provide 和 inject 的使用方式略有不同，但依然提供了强大的功能来实现跨组件通信。

1. 祖先组件提供数据

在祖先组件中使用 provide 提供数据。

示例

1. 祖先组件（GrandparentComponent.vue）：

1
7
8

2. 后代组件注入数据

在后代组件中使用 inject 注入数据。

示例

1. 父组件（ParentComponent.vue）：

1
6
7

1. 子组件（ChildComponent.vue）：

1
6
7

更复杂的示例

下面是一个更复杂的示例，展示了如何在多个组件之间传递数据，并在组件内部进行响应式更新。

示例

1. 祖先组件（GrandparentComponent.vue）：

1
8
9

1. 父组件（ParentComponent.vue）：

1
6
7

1. 子组件（ChildComponent.vue）：

1
6
7

注意事项

1. 注入默认值：

   • 可以为 inject 提供默认值，以防注入的数据未被提供。
   • 示例：const sharedValue = inject('sharedValue', '默认值').

2. 注入非响应式数据：

   • 如果注入的数据不是响应式的，可以使用 reactive 或者 ref 包装数据。
   • 示例：provide('sharedValue', reactive({ data: '这是数据' })).

3. 命名空间冲突：

   • 如果多个组件使用相同的注入键名，可能会导致命名空间冲突。可以通过命名空间或其他方式避免冲突。
   • 示例：provide('appSharedValue', value).