高级组件通信模式：provide/inject
Vue.js 中的 provide/inject 机制为组件通信提供了比 props 和自定义事件更强大的替代方案，尤其是在处理深层嵌套组件时。它允许父组件向所有子组件"提供"数据或方法，无论组件树有多深。这避免了需要手动通过多层组件传递 props，简化了代码并提高了可维护性。虽然 props 和事件适合直接的父子通信，但 provide/inject 擅长实现组件树中远亲之间的通信。
理解 provide 和 inject
provide 和 inject 选项在 Vue 组件中用于实现这种模式。provide 选项允许父组件将其数据或方法提供给其子组件。inject 选项允许子组件接收提供的数据或方法。
provide 选项
provide选项可以在组件中使用两种不同的方法来定义：
对象语法： 你可以直接提供一个对象，其中键是你想要用于注入的名称，值是你想要提供的数据或方法。
函数语法： 你可以提供一个返回对象的函数。当你需要提供依赖于组件状态的数据时，这很有用。
对象语法示例
<template>
<div>
<p>Providing a message to descendants.</p>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide: {
message: 'Hello from the parent!'
}
};
</script>
在这个例子中，父组件提供了一个与键 message 关联的字符串值。
函数语法示例
<template>
<div>
<p>Providing a dynamic message to descendants.</p>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dynamicMessage: 'Initial message'
};
},
provide() {
return {
message: this.dynamicMessage,
updateMessage: this.updateDynamicMessage
};
},
methods: {
updateDynamicMessage(newMessage) {
this.dynamicMessage = newMessage;
}
}
};
</script>
这里，provide 选项是一个返回对象的函数。提供的 message 取决于组件的 dynamicMessage 数据属性。此外，还提供了一个方法 updateMessage，允许子组件调用此方法来更新父组件的状态。
inject 选项
inject 选项用于后代组件接收祖先组件提供的数据或方法。它可以被定义为字符串数组或对象。
数组语法示例
<template>
<div>
<p>Message from parent: {{ message }}</p>
</div>
</template>
<script>
export default {
inject: ['message']
};
</script>
在这个例子中，子组件注入了由父组件提供的 message。注入的 message 可以在组件的模板中使用。
对象语法示例
对象语法提供了对注入过程的更多控制。您可以指定默认值或要求提供的值必须存在。
<template>
<div>
<p>Message from parent: {{ message }}</p>
<p v-if="config">Config value: {{ config.apiURL }}</p>
<p v-else>Config not provided.</p>
</div>
</template>
<script>
export default {
inject: {
message: {
from: 'message', // Optional: specify the key to inject from
default: 'Default message'
},
config: {
from: 'appConfig',
default: null
}
}
};
</script>
在这个例子中：
message被注入。如果没有提供message，则使用Default值’Default message’。from属性是可选的，允许你注入一个与提供名称不同的属性。config从appConfig被注入。如果没有提供appConfig，则使用Default值null。
响应性
理解响应性如何与 provide/inject 配合工作很重要。如果你提供一个原始值（字符串、数字、布尔值），它将不会是响应性的。如果你提供一个对象或方法，对象属性的变化或对方法的调用会反映在注入的组件中。
为了保持与原始值的响应性，你应该提供一个响应式对象（例如，使用来自组合式 API 的 ref 或 reactive），或者一个计算属性。
示例包含 ref
// Parent component
<template>
<div>
<p>Providing a reactive message to descendants.</p>
<input v-model="message" type="text">
<child-component></child-component>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const message = ref('Hello from the parent!');
return {
message
};
},
provide() {
return {
message: this.message
};
}
};
</script>
// Child component
<template>
<div>
<p>Message from parent: {{ message }}</p>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return {
message
};
}
};
</script>
在这个例子中，父组件提供了一个名为 ref 的 message。子组件注入这个 ref。父组件中对 message 的任何更改将自动反映在子组件中，反之亦然，如果子组件修改了 ref。
实用示例与演示
让我们考虑一个场景，其中你有一个表示配置表单的深度嵌套组件结构。根组件包含应用程序配置，而你希望将此配置提供给各种嵌套组件，而无需通过 props 向下传递。
场景：配置表单
想象一个包含多个嵌套组件的复杂配置表单：
App：包含应用程序配置的根组件。Section: 代表配置表单中的一个部分的组件。SubSection: 代表章节内一个子节的一个组件。ConfigInput: 代表特定配置设置输入字段的组件。
如果没有 provide/inject，你需要将配置对象作为 props 通过组件树的每一层传递。有了 provide/inject，你可以直接将配置对象注入到 ConfigInput 组件中。
App.vue (根组件)
<template>
<div>
<h1>Application Configuration</h1>
<section-component></section-component>
</div>
</template>
<script>
import { reactive } from 'vue';
import SectionComponent from './components/SectionComponent.vue';
export default {
components: {
SectionComponent
},
setup() {
const config = reactive({
apiURL: 'https://api.example.com',
theme: 'light',
itemsPerPage: 20
});
return {
config
};
},
provide() {
return {
appConfig: this.config
};
}
};
</script>
SectionComponent.vue
<template>
<div>
<h2>Section</h2>
<sub-section-component></sub-section-component>
</div>
</template>
<script>
import SubSectionComponent from './SubSectionComponent.vue';
export default {
components: {
SubSectionComponent
}
};
</script>
SubSectionComponent.vue
<template>
<div>
<h3>Sub Section</h3>
<config-input label="API URL" configKey="apiURL"></config-input>
<config-input label="Theme" configKey="theme"></config-input>
</div>
</template>
<script>
import ConfigInput from './ConfigInput.vue';
export default {
components: {
ConfigInput
}
};
</script>
ConfigInput.vue
<template>
<div>
<label>{{ label }}:</label>
<input type="text" :value="config[configKey]" @input="updateConfig">
</div>
</template>
<script>
import { inject } from 'vue';
export default {
props: {
label: {
type: String,
required: true
},
configKey: {
type: String,
required: true
}
},
setup() {
const config = inject('appConfig');
const updateConfig = (event) => {
config[this.configKey] = event.target.value;
};
return {
config,
updateConfig
};
}
};
</script>
在这个例子中，App 组件提供了 config 对象。ConfigInput 组件注入了 config 对象，并使用它来显示和更新配置值。在 ConfigInput 组件中做出的更改将会反映在 App 组件中，因为 config 对象是响应式的。