目录
前言什么是Provide/Inject？基本用法提供数据（Provide）注入数据（Inject）高级用法1. 使用对象作为Provide2. 使用工厂函数动态数据3. 与响应式数据结合4. 可选的注入5. 在深层组件中使用6. 响应式数据的处理实际案例主题切换总结前言
Vue.js 提供了多种方式来管理和共享状态，包括最常用的 Vuex。然而，在某些情况下，我们只需要在父子组件之间进行简单的数据共享，而不需要引入完整的全局状态管理解决方案。Vue.js 通过 provide 和 inject API 提供了一种轻量级的方式来实现这一目标。
这篇文章将详细介绍如何在 Vue.js 中使用 provide 和 inject 模式，并探讨其在实际应用中的高级用法。
什么是Provide/Inject？
Provide 和 Inject 是Vue.js提供的一对API，用于在组件树中提供和注入依赖。通过这对API，父组件可以提供数据，子组件可以注入这些数据，避免了中间层组件不必要的props传递。简单来说，provide 就是“提供数据”，inject 就是“接收数据”。
基本用法
提供数据（Provide）
在父组件中使用 provide 选项来提供数据。provide 可以是一个对象或一个返回对象的函数。
// ParentComponent.vue<template> <div> <ChildComponent /> </div></template><script>export default { name: 'ParentComponent', provide() { return { message: 'Hello from Parent' } }}</script>在这个例子中，ParentComponent 通过 provide 提供了一个 message 数据。
注入数据（Inject）
在子组件中使用 inject 选项来接收数据。
// ChildComponent.vue<template> <div> {{ message }} </div></template><script>export default { name: 'ChildComponent', inject: ['message']}</script>在这个例子中，ChildComponent 通过 inject 接收到 message 数据并在模板中显示出来。
高级用法
1. 使用对象作为Provide
有的时候我们需要提供多个数据，可以直接在 provide 中返回一个对象：
// ParentComponent.vue<template> <div> <ChildComponent /> </div></template><script>export default { name: 'ParentComponent', provide() { return { message: 'Hello from Parent', user: { name: 'John Doe', age: 30 } } }}</script>2. 使用工厂函数动态数据
有时候，我们需要根据父组件的状态来动态提供数据，这时可以使用工厂函数：
<template> <div> <ChildComponent /> </div></template><script>export default { name: 'ParentComponent', data() { return { parentMessage: 'Hello from reactive Parent' } }, provide() { return { message: this.parentMessage } }}</script>3. 与响应式数据结合
要注意的是，通过 provide 提供的数据并不是响应式的。如果你希望提供的数据是响应式的，可以借助 Vue 的 reactive 或 ref。
<template> <div> <ChildComponent /> </div></template><script>import { ref } from 'vue';export default { name: 'ParentComponent', setup() { const message = ref('Hello from reactive Parent'); return { message, provide: { message } } }}</script>// ChildComponent.vue<template> <div> {{ message }} </div></template><script>import { inject } from 'vue';export default { name: 'ChildComponent', setup() { const message = inject('message'); return { message } }}</script>4. 可选的注入
有时候，子组件可能希望接收的数据是可选的。也就是说，如果没有提供数据，子组件可以使用默认值。我们可以在 inject 中使用对象语法来设置默认值。
// ChildComponent.vue<template> <div> {{ message }} </div></template><script>export default { name: 'ChildComponent', inject: { message: { from: 'message', default: 'Default Message' } }}</script>在这个例子中，如果父组件没有提供 message，子组件会使用 ‘Default Message’ 作为默认值。
5. 在深层组件中使用
provide 和 inject 的数据可以在组件树的任何深层级别使用。父组件提供的数据可以被子组件以及子组件的子组件等使用。
// ParentComponent.vue<template> <div> <ChildComponent /> </div></template><script>export default { name: 'ParentComponent', provide() { return { message: 'Hello from Parent' } }}</script>// ChildComponent.vue<template> <div> <GrandchildComponent /> </div></template><script>export default { name: 'ChildComponent'}</script>// GrandchildComponent.vue<template> <div> {{ message }} </div></template><script>export default { name: 'GrandchildComponent', inject: ['message']}</script>在这个例子中，即使 GrandchildComponent 是 ParentComponent 的孙组件，它依然能够接收到 ParentComponent 提供的 message。
6. 响应式数据的处理
前面提到过，默认情况下 provide 提供的数据不是响应式的。如果我们需要数据是响应式的，可以使用 Vue Composition API 来实现。
// ParentComponent.vue<template> <div> <ChildComponent /> <button @click="updateMessage">Update Message</button> </div></template><script>import { ref, provide } from 'vue';export default { name: 'ParentComponent', setup() { const message = ref('Hello from Parent'); provide('message', message); const updateMessage = () => { message.value = 'Updated Message from Parent'; }; return { updateMessage }; }}</script>// ChildComponent.vue<template> <div> {{ message }} </div></template><script>import { inject } from 'vue';export default { name: 'ChildComponent', setup() { const message = inject('message'); return { message }; }}</script>在这个例子中，点击按钮会更新 message 的值，并且更新会自动反映到 ChildComponent 中。这是因为我们使用了 ref 来使 message 成为响应式数据。
实际案例
主题切换
假设我们要实现一个简单的主题切换功能，用户可以在黑暗模式和明亮模式之间切换。我们可以使用 provide 和 inject 来实现。
1. 主题提供者组件
创建一个主题提供者组件，通过 provide 向子组件提供当前的主题和切换主题的方法。
// ThemeProvider.vue<template> <div :class="theme"> <slot></slot> <button @click="toggleTheme">Toggle Theme</button> </div></template><script>import { ref, provide } from 'vue';export default { name: 'ThemeProvider', setup() { const theme = ref('light'); const toggleTheme = () => { theme.value = (theme.value === 'light' ? 'dark' : 'light'); }; provide('theme', theme); provide('toggleTheme', toggleTheme); return { theme, toggleTheme }; }}</script><style>.light { background-color: white; color: black;}.dark { background-color: black; color: white;}</style>2. 主题消费者组件
创建一个子组件，从 ThemeProvider 中注入主题和切换主题的方法。
// ThemedComponent.vue<template> <div> <p>The current theme is: {{ theme }}</p> </div></template><script>import { inject } from 'vue';export default { name: 'ThemedComponent', setup() { const theme = inject('theme'); return { theme }; }}</script>3. 应用程序组件
在应用程序中使用 ThemeProvider 包裹 ThemedComponent。
// App.vue<template> <ThemeProvider> <ThemedComponent /> </ThemeProvider></template><script>import ThemeProvider from './components/ThemeProvider.vue';import ThemedComponent from './components/ThemedComponent.vue';export default { name: 'App', components: { ThemeProvider, ThemedComponent }}</script>通过这种方式，我们实现了一个简单的主题切换功能，并且所有的主题相关逻辑都集中在 ThemeProvider 组件中，子组件只需注入相关的数据即可。
总结
总的来说，provide 和 inject 是 Vue.js 中非常强大且灵活的工具，能够显著简化组件间的数据共享，尤其是在组件层级较深的场景中。虽然它们提供了一种便捷的解决方案，但也需要谨慎使用，以避免过度依赖导致代码的可读性和可维护性下降。在实际开发中，合理地结合 provide 和 inject，以及其他状态管理方案（如 Vuex），能使应用更具结构性和可维护性。
