在Vue 3的开发中，父子组件通信是构建复杂应用的核心部分。除了常见的props和emit，Vue 3提供的provide和inject机制为跨层级的数据传递提供了优雅的解决方案。我在小贺的神奇网站中分享了许多Vue相关的实用技巧，今天我们将聚焦provide和inject，通过详细的讲解和代码示例，带你掌握这一强大的通信方式，无论是初学者还是进阶开发者都能轻松上手！
关于作者：我是小贺，乐于分享各种前端知识，同时欢迎大家关注我的个人博客以及微信公众号[小贺前端笔记]

provide和inject是什么？

provide和inject是Vue 3组合式API中的一对API，用于在组件树中实现父组件向子孙组件（不限于直接子组件）传递数据。它们特别适合以下场景：

跨多层级通信：避免逐层传递props的繁琐。
全局配置：如主题、语言设置等。
依赖注入：让子组件直接访问父组件提供的数据或方法。

基本用法如下：
父组件使用provide提供数据。
子孙组件使用inject接收数据。

基本用法与示例

在父组件中使用provide向子孙组件注入数据：

// Parent.vue
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('light');

    // 提供数据
    provide('theme', theme);

    return { theme };
  }
};

在子组件或任意子孙组件中使用inject接收数据：
// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    // 接收数据
    const theme = inject('theme');

    return { theme };
  }
};

模板中：
<template>
  <div>
    当前主题：{{ theme }}
  </div>
</template>

运行结果：子组件将显示“当前主题：light”。

provide和inject支持响应式数据。当父组件的数据更新时，子组件会自动响应变化：

// Parent.vue
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('light');

    provide('theme', theme);

    // 模拟切换主题
    const toggleTheme = () => {
      theme.value = theme.value === 'light' ? 'dark' : 'light';
    };

    return { theme, toggleTheme };
  }
};

<!-- Parent.vue 模板 -->
<template>
  <div>
    <button @click="toggleTheme">切换主题</button>
    <Child />
  </div>
</template>

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
};

<!-- Child.vue 模板 -->
<template>
  <div :class="theme">
    当前主题：{{ theme }}
  </div>
</template>

点击按钮后，子组件的theme会自动更新，展示响应式效果。

高级用法

provide不仅可以传递数据，还可以传递方法，子组件可以直接调用：

// Parent.vue
import { provide, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    provide('count', count);
    provide('increment', increment);

    return { count };
  }
};

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const count = inject('count');
    const increment = inject('increment');

    return { count, increment };
  }
};

<!-- Child.vue 模板 -->
<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">加1</button>
  </div>
</template>

子组件可以直接调用父组件提供的increment方法，更新count。

如果子组件未找到provide提供的数据，可以设置默认值：

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const theme = inject('theme', 'default'); // 默认值
    return { theme };
  }
};

Vue 3.3+还支持通过inject的第三个参数设置响应式默认值：

import { inject, ref } from 'vue';

export default {
  setup() {
    const theme = inject('theme', ref('default')); // 响应式默认值
    return { theme };
  }
};

为避免键名冲突，可以使用Symbol作为provide的键：
// Parent.vue
import { provide, ref } from 'vue';

const THEME_KEY = Symbol('theme');

export default {
  setup() {
    const theme = ref('light');
    provide(THEME_KEY, theme);
    return { theme };
  }
};

// Child.vue
import { inject } from 'vue';

const THEME_KEY = Symbol('theme');

export default {
  setup() {
    const theme = inject(THEME_KEY, ref('default'));
    return { theme };
  }
};

注意事项与最佳实践

响应式传递：确保provide的数据是响应式的（如ref或reactive），否则子组件无法感知变化。
避免滥用：provide和inject适合跨层级共享数据，但不建议完全替代props和emit，以保持组件的显式性。
命名冲突：使用唯一键名或Symbol避免冲突。
组件卸载：通常无需手动清理provide/inject，Vue会自动管理，但复杂场景下需注意依赖的生命周期。
调试技巧：在大型项目中，建议在provide时添加注释说明数据用途，便于维护。

实际应用场景

主题管理：在根组件提供主题配置，子组件直接使用。
全局状态：在不需要Vuex或Pinia的情况下，快速共享全局数据。
插件开发：为插件提供公共API或配置。

示例：一个简单的主题切换应用：

// App.vue
import { provide, ref } from 'vue';
import Child from './components/Child.vue';

export default {
  components: { Child },
  setup() {
    const theme = ref('light');
    provide('theme', theme);

    const toggleTheme = () => {
      theme.value = theme.value === 'light' ? 'dark' : 'light';
    };

    return { toggleTheme };
  }
};

<!-- App.vue 模板 -->
<template>
  <div :class="theme">
    <button @click="toggleTheme">切换主题</button>
    <Child />
  </div>
</template>
// Child.vue
import { inject } from 'vue';
export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
};
<!-- Child.vue 模板 -->
<template>
  <div :class="theme">
    子组件主题：{{ theme }}
  </div>
</template>

总结

Vue 3的provide和inject为父子组件通信提供了灵活高效的解决方案，特别适合跨层级数据共享和全局配置管理。通过本文的讲解和示例，你应该已经掌握了provide和inject的基本用法、高级技巧以及注意事项。想深入学习更多Vue 3、React或全栈开发的知识？欢迎访问我的博客——小贺的神奇网站，那里有更多前端技术和实战经验分享！快去试试provide和inject，让你的Vue组件通信更优雅！