vue-07(高级组件通信模式：provide+inject)

高级组件通信模式：provide/inject

Vue.js 中的 provide/inject 机制为组件通信提供了比 props 和自定义事件更强大的替代方案，尤其是在处理深层嵌套组件时。它允许父组件向所有子组件"提供"数据或方法，无论组件树有多深。这避免了需要手动通过多层组件传递 props，简化了代码并提高了可维护性。虽然 props 和事件适合直接的父子通信，但 provide/inject 擅长实现组件树中远亲之间的通信。

理解 provide 和 inject

provide 和 inject 选项在 Vue 组件中用于实现这种模式。provide 选项允许父组件将其数据或方法提供给其子组件。inject 选项允许子组件接收提供的数据或方法。

provide 选项

provide选项可以在组件中使用两种不同的方法来定义：

1. 对象语法： 你可以直接提供一个对象，其中键是你想要用于注入的名称，值是你想要提供的数据或方法。

2. 函数语法： 你可以提供一个返回对象的函数。当你需要提供依赖于组件状态的数据时，这很有用。

对象语法示例

在这个例子中，父组件提供了一个与键 message 关联的字符串值。

函数语法示例

这里，provide 选项是一个返回对象的函数。提供的 message 取决于组件的 dynamicMessage 数据属性。此外，还提供了一个方法 updateMessage，允许子组件调用此方法来更新父组件的状态。

inject 选项

inject 选项用于后代组件接收祖先组件提供的数据或方法。它可以被定义为字符串数组或对象。

数组语法示例

在这个例子中，子组件注入了由父组件提供的 message。注入的 message 可以在组件的模板中使用。

对象语法示例

对象语法提供了对注入过程的更多控制。您可以指定默认值或要求提供的值必须存在。

在这个例子中：

• message被注入。如果没有提供message ，则使用Default值’Default message’。from 属性是可选的，允许你注入一个与提供名称不同的属性。
• config从 appConfig 被注入。如果没有提供 appConfig，则使用Default值 null。

响应性

理解响应性如何与 provide/inject 配合工作很重要。如果你提供一个原始值（字符串、数字、布尔值），它将不会是响应性的。如果你提供一个对象或方法，对象属性的变化或对方法的调用会反映在注入的组件中。

为了保持与原始值的响应性，你应该提供一个响应式对象（例如，使用来自组合式 API 的 ref 或 reactive），或者一个计算属性。

示例包含 ref

// Parent component




// Child component

在这个例子中，父组件提供了一个名为 ref 的 message。子组件注入这个 ref。父组件中对 message 的任何更改将自动反映在子组件中，反之亦然，如果子组件修改了 ref。

实用示例与演示

让我们考虑一个场景，其中你有一个表示配置表单的深度嵌套组件结构。根组件包含应用程序配置，而你希望将此配置提供给各种嵌套组件，而无需通过 props 向下传递。

场景：配置表单

想象一个包含多个嵌套组件的复杂配置表单：

• App：包含应用程序配置的根组件。
• Section : 代表配置表单中的一个部分的组件。
• SubSection : 代表章节内一个子节的一个组件。
• ConfigInput: 代表特定配置设置输入字段的组件。

如果没有 provide/inject，你需要将配置对象作为 props 通过组件树的每一层传递。有了 provide/inject，你可以直接将配置对象注入到 ConfigInput 组件中。

App.vue (根组件)

SectionComponent.vue

SubSectionComponent.vue

ConfigInput.vue

在这个例子中，App 组件提供了 config 对象。ConfigInput 组件注入了 config 对象，并使用它来显示和更新配置值。在 ConfigInput 组件中做出的更改将会反映在 App 组件中，因为 config 对象是响应式的。