Vue3——provide与inject组件通信

Vue3 provide与inject组件通信

一、provide与inject基础概念

1.1 什么是provide与inject？

provide和inject是Vue3提供的一种跨层级组件通信方式，用于祖先组件向其所有子孙组件注入依赖，而无需通过props在每一层级手动传递。

核心特点：

• 跨层级通信：可以跳过中间组件，直接在祖先和后代组件间通信
• 简化深层传递：解决了props需要逐层传递的"props drilling"问题
• 灵活注入：后代组件可以选择性注入需要的数据或方法
• 非响应式默认：默认情况下传递的数据是非响应式的，需特殊处理实现响应式

使用场景：

• 深层级组件间的数据共享（如主题、语言、用户信息等）
• 组件库开发中的上下文传递
• 复杂应用中跨多层级的状态共享
• 替代部分全局状态管理的场景

1.2 基本使用示例

祖先组件 (Grandparent.vue)：

<template>
  <div class="grandparent">
    <h2>祖先组件</h2>
    <p>向后代组件提供数据</p>
    <ParentComponent />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import ParentComponent from './ParentComponent.vue';

// 提供数据给后代组件
// 第一个参数：注入的键（字符串或Symbol）
// 第二个参数：要提供的值
provide('message', 'Hello from Grandparent');
provide('user', {
  name: '张三',
  age: 30
});
provide('version', '1.0.0');
</script>

<style scoped>
.grandparent {
  border: 2px solid #42b983;
  padding: 20px;
  border-radius: 6px;
  margin: 20px;
}
</style>

中间父组件 (ParentComponent.vue)：

<template>
  <div class="parent">
    <h3>父组件（中间组件）</h3>
    <p>不需要传递props，直接透传</p>
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<style scoped>
.parent {
  border: 2px solid #3498db;
  padding: 15px;
  border-radius: 6px;
  margin: 15px;
}
</style>

后代组件 (ChildComponent.vue)：

<template>
  <div class="child">
    <h4>子组件（后代组件）</h4>
    <div class="injected-data">
      <p><strong>注入的消息:</strong> {{ message }}</p>
      <p><strong>注入的用户:</strong> {{ user.name }} ({{ user.age }})</p>
      <p><strong>注入的版本:</strong> {{ version }}</p>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 注入祖先组件提供的数据
// 第一个参数：注入的键（必须与provide的键一致）
// 第二个参数（可选）：默认值
const message = inject('message', '默认消息');
const user = inject('user', { name: '未知', age: 0 });
const version = inject('version');
// 注入一个不存在的键，使用默认值
const theme = inject('theme', 'light');

console.log('注入的theme默认值:', theme); // 输出: 注入的theme默认值: light
</script>

<style scoped>
.child {
  border: 2px solid #9b59b6;
  padding: 15px;
  border-radius: 6px;
  margin: 15px;
}

.injected-data {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>

运行结果：

• 页面显示三个嵌套的组件：祖先组件 → 父组件 → 子组件
• 子组件正确显示从祖先组件注入的三个数据：
  • 注入的消息: Hello from Grandparent
  • 注入的用户: 张三 (30)
  • 注入的版本: 1.0.0
• 控制台输出：注入的theme默认值: light（使用了默认值）

代码解析：

• 祖先组件使用provide函数提供数据，接收两个参数：注入键和值
• 后代组件使用inject函数注入数据，接收注入键和可选的默认值
• 中间父组件不需要任何特殊处理，数据直接跨层级传递
• 当注入不存在的键时，会使用提供的默认值，如果没有默认值则为undefined

1.3 与props的区别

特性	provide/inject	props
传递方式	跨层级直接传递	父子组件逐层传递
适用场景	深层级组件通信	父子组件通信
响应式	默认非响应式，需特殊处理	天然响应式
数据流向	主要是祖先到后代	父到子的单向数据流
类型检查	需手动实现	内置支持
代码耦合	较低（通过注入键关联）	较高（显式声明props）

二、响应式数据传递

2.1 使用ref实现响应式

默认情况下，provide提供的数据是非响应式的。要实现响应式传递，需要使用ref或reactive包装数据。

<template>
  <div class="reactive-provide">
    <h2>响应式provide示例</h2>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加计数</button>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 使用ref包装数据使其响应式
const count = ref(0);

// 提供响应式数据
provide('count', count);

// 提供修改数据的方法
provide('increment', () => {
  count.value++;
});

// 直接提供修改后的原始值（非响应式）
provide('currentCount', count.value); // 注意：这是非响应式的
</script>

子组件 (ChildComponent.vue)：

<template>
  <div class="child">
    <h3>子组件</h3>
    <p>注入的响应式count: {{ count }}</p>
    <p>注入的非响应式currentCount: {{ currentCount }}</p>
    <button @click="increment">调用注入的increment方法</button>
    <GrandchildComponent />
  </div>
</template>

<script setup>
import { inject } from 'vue';
import GrandchildComponent from './GrandchildComponent.vue';

// 注入响应式数据和方法
const count = inject('count');
const currentCount = inject('currentCount');
const increment = inject('increment');
</script>

孙组件 (GrandchildComponent.vue)：

<template>
  <div class="grandchild">
    <h4>孙组件</h4>
    <p>孙组件中的count: {{ count }}</p>
    <button @click="increment">孙组件调用increment</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 孙组件也可以注入相同的数据
const count = inject('count');
const increment = inject('increment');
</script>

运行结果：

1. 初始状态：
   • 祖先组件count显示0
   • 子组件显示注入的count为0，currentCount为0
   • 孙组件显示count为0
2. 点击祖先组件"增加计数"按钮：
   • 所有组件中的count都更新为1
   • 子组件中的currentCount仍然为0（非响应式）
3. 点击子组件"调用注入的increment方法"按钮：
   • 所有组件中的count都更新为2
   • currentCount仍然为0
4. 点击孙组件"孙组件调用increment"按钮：
   • 所有组件中的count都更新为3
   • currentCount仍然为0

代码解析：

• 使用ref包装的数据通过provide传递后仍然保持响应式
• 后代组件注入后可以直接使用，无需.value（模板中自动解包）
• 提供修改数据的方法是推荐的做法，而不是直接提供修改权限
• 直接提供原始值（如currentCount）是非响应式的，不会随源数据变化

2.2 使用reactive实现响应式对象传递

对于复杂对象，使用reactive包装后提供，可以保持对象内部属性的响应式。

<template>
  <div class="reactive-object">
    <h2>响应式对象provide示例</h2>
    <div class="user-info">
      <p>姓名: {{ user.name }}</p>
      <p>年龄: {{ user.age }}</p>
      <p>城市: {{ user.address.city }}</p>
    </div>
    <div class="controls">
      <button @click="changeName">修改姓名</button>
      <button @click="increaseAge">增加年龄</button>
      <button @click="changeCity">修改城市</button>
    </div>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 创建响应式对象
const user = reactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京'
  }
});

// 提供整个响应式对象
provide('user', user);

// 提供修改方法
provide('changeName', (newName) => {
  user.name = newName;
});

// 提供修改城市的方法
provide('changeCity', (newCity) => {
  user.address.city = newCity;
});

// 组件内部的修改方法
const changeName = () => {
  user.name = user.name === '张三' ? '李四' : '张三';
};

const increaseAge = () => {
  user.age++;
};

const changeCity = () => {
  user.address.city = user.address.city === '北京' ? '上海' : '北京';
};
</script>

子组件 (ChildComponent.vue)：

<template>
  <div class="child">
    <h3>子组件</h3>
    <div class="injected-user">
      <p>姓名: {{ user.name }}</p>
      <p>年龄: {{ user.age }}</p>
      <p>城市: {{ user.address.city }}</p>
    </div>
    <button @click="changeNameToWangwu">将姓名改为王五</button>
    <GrandchildComponent />
  </div>
</template>

<script setup>
import { inject } from 'vue';
import GrandchildComponent from './GrandchildComponent.vue';

// 注入响应式对象和方法
const user = inject('user');
const changeName = inject('changeName');

const changeNameToWangwu = () => {
  changeName('王五');
};
</script>

运行结果：

• 所有组件中的用户信息会随着数据变化而同步更新
• 无论是祖先组件还是子组件调用修改方法，所有组件都能感知到变化
• 对象的嵌套属性（如address.city）也保持响应式

代码解析：

• reactive创建的响应式对象可以直接通过provide传递
• 后代组件注入后可以直接访问对象的所有属性
• 修改对象的属性（包括嵌套属性）会触发所有使用该数据的组件更新
• 推荐提供专门的修改方法，而不是让后代组件直接修改对象属性

2.3 使用computed提供派生响应式数据

可以使用computed提供基于其他响应式数据派生的值。

<template>
  <div class="computed-provide">
    <h2>Computed Provide示例</h2>
    <p>数量: {{ quantity }}</p>
    <p>单价: ¥{{ price }}</p>
    <button @click="quantity++">增加数量</button>
    <button @click="price += 10">提高价格</button>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref, computed } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 基础响应式数据
const quantity = ref(1);
const price = ref(100);

// 计算属性
const total = computed(() => {
  return quantity.value * price.value;
});

// 提供数据
provide('quantity', quantity);
provide('price', price);
provide('total', total);
</script>

子组件 (ChildComponent.vue)：

<template>
  <div class="child">
    <h3>子组件</h3>
    <p>数量: {{ quantity }}</p>
    <p>单价: ¥{{ price }}</p>
    <p><strong>总价: ¥{{ total }}</strong></p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 注入计算属性
const quantity = inject('quantity');
const price = inject('price');
const total = inject('total');
</script>

运行结果：

• 当点击"增加数量"或"提高价格"按钮时，子组件中的总价会自动更新
• 计算属性total会根据quantity和price的变化自动重新计算

代码解析：

• computed创建的计算属性可以直接通过provide传递
• 计算属性保持响应式，其依赖变化时会自动更新
• 后代组件注入后可以直接使用计算属性，无需额外处理

三、高级使用技巧

3.1 使用Symbol避免命名冲突

当开发大型应用或组件库时，使用字符串作为注入键可能导致命名冲突。使用Symbol可以有效避免这个问题。

创建共享的注入键 (keys.js)：

// 创建唯一的Symbol作为注入键
export const userKey = Symbol('user');
export const themeKey = Symbol('theme');
export const utilsKey = Symbol('utils');

祖先组件：

<template>
  <div class="symbol-provide">
    <h2>使用Symbol作为注入键</h2>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
import { userKey, themeKey, utilsKey } from './keys';

// 使用Symbol作为注入键
provide(userKey, {
  name: '张三',
  age: 30
});

provide(themeKey, 'dark');

provide(utilsKey, {
  formatDate: (date) => {
    return date.toLocaleDateString();
  },
  formatCurrency: (value) => {
    return `¥${value.toFixed(2)}`;
  }
});
</script>

后代组件：

<template>
  <div class="child">
    <h3>后代组件</h3>
    <p>用户: {{ user.name }} ({{ user.age }})</p>
    <p>主题: {{ theme }}</p>
    <p>今天日期: {{ formatDate(new Date()) }}</p>
    <p>价格: {{ formatCurrency(123.456) }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';
import { userKey, themeKey, utilsKey } from './keys';

// 使用Symbol注入
const user = inject(userKey);
const theme = inject(themeKey);
const utils = inject(utilsKey);

// 解构工具函数
const { formatDate, formatCurrency } = utils;
</script>

运行结果：

• 后代组件成功注入并显示了使用Symbol键提供的数据和方法
• 日期和价格被正确格式化

代码解析：

• 创建单独的keys.js文件统一管理注入键，便于维护
• 使用Symbol确保注入键的唯一性，避免命名冲突
• 特别适合在组件库开发或多人协作项目中使用

3.2 注入值的验证和默认值处理

为了提高代码健壮性，可以对注入的值进行验证，并提供合理的默认值。

<template>
  <div class="validation-provide">
    <h2>注入值验证示例</h2>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 提供部分数据
provide('requiredData', '这是必要数据');
provide('optionalData', ref('这是可选数据'));
// 不提供validateData
</script>

子组件：

<template>
  <div class="child">
    <h3>子组件</h3>
    <p>必要数据: {{ requiredData }}</p>
    <p>可选数据: {{ optionalData }}</p>
    <p>验证数据: {{ validateData }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 1. 必要数据 - 没有提供会报错
const requiredData = inject('requiredData', () => {
  throw new Error('requiredData 是必要的注入数据');
});

// 2. 可选数据 - 提供默认值
const optionalData = inject('optionalData', ref('默认可选数据'));

// 3. 带验证的注入数据
const validateData = inject('validateData', '默认验证数据', (value) => {
  if (typeof value !== 'string') {
    console.warn('validateData 应该是字符串类型');
    return false;
  }
  if (value.length < 3) {
    console.warn('validateData 长度应该大于3');
    return false;
  }
  return true;
});

console.log('requiredData:', requiredData);
console.log('optionalData:', optionalData.value);
console.log('validateData:', validateData);
</script>

运行结果：

• 页面显示必要数据、可选数据和验证数据
• 控制台输出警告：validateData 应该是字符串类型（因为没有提供该数据，使用了默认值）
• 控制台输出各注入数据的值

代码解析：

• 必要数据可以通过在默认值工厂函数中抛错来确保必须提供
• 可选数据提供合理的默认值，增强代码健壮性
• 使用第三个参数（验证函数）可以对注入的值进行类型和格式验证
• 验证函数返回false时会在控制台发出警告

3.3 跨层级方法调用

除了传递数据，provide/inject还可以传递方法，实现后代组件调用祖先组件方法的功能。

<template>
  <div class="method-provide">
    <h2>跨层级方法调用</h2>
    <p>消息: {{ message }}</p>
    <p>通知数量: {{ notificationCount }}</p>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 状态数据
const message = ref('Hello from Parent');
const notificationCount = ref(0);

// 提供数据
provide('message', message);
provide('notificationCount', notificationCount);

// 提供方法
provide('updateMessage', (newMessage) => {
  message.value = newMessage;
  notificationCount.value++;
});

provide('clearNotifications', () => {
  notificationCount.value = 0;
});
</script>

孙组件：

<template>
  <div class="grandchild">
    <h4>孙组件</h4>
    <p>当前消息: {{ message }}</p>
    <div class="controls">
      <input v-model="newMessage" placeholder="输入新消息">
      <button @click="updateMessage(newMessage)">更新消息</button>
      <button @click="clearNotifications">清除通知</button>
    </div>
    <p>通知: {{ notificationCount }}</p>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue';

// 注入数据和方法
const message = inject('message');
const notificationCount = inject('notificationCount');
const updateMessage = inject('updateMessage');
const clearNotifications = inject('clearNotifications');

// 本地状态
const newMessage = ref('');
</script>

运行结果：

• 在孙组件输入框中输入文本并点击"更新消息"按钮：
  • 祖先组件的消息更新为输入的文本
  • 通知数量增加1
• 点击"清除通知"按钮：
  • 通知数量重置为0

代码解析：

• 祖先组件可以提供修改自身状态的方法
• 后代组件注入方法后可以直接调用，实现跨层级通信
• 这种方式遵循了单向数据流原则，状态修改集中在数据提供方
• 适合实现全局操作，如主题切换、语言切换、通知管理等

四、实际应用场景

4.1 主题切换功能

使用provide/inject实现全局主题切换功能，所有组件都能响应主题变化。

主题提供者 (ThemeProvider.vue)：

<template>
  <div class="theme-provider" :class="theme">
    <h2>主题切换示例</h2>
    <div class="theme-controls">
      <button @click="setTheme('light')" :class="{ active: theme === 'light' }">浅色主题</button>
      <button @click="setTheme('dark')" :class="{ active: theme === 'dark' }">深色主题</button>
      <button @click="setTheme('blue')" :class="{ active: theme === 'blue' }">蓝色主题</button>
    </div>
    <ContentComponent />
  </div>
</template>

<script setup>
import { provide, ref, reactive } from 'vue';
import ContentComponent from './ContentComponent.vue';

// 主题状态
const theme = ref('light');

// 主题样式变量
const themeStyles = reactive({
  light: {
    bgColor: '#ffffff',
    textColor: '#333333',
    borderColor: '#e0e0e0'
  },
  dark: {
    bgColor: '#333333',
    textColor: '#ffffff',
    borderColor: '#666666'
  },
  blue: {
    bgColor: '#e6f7ff',
    textColor: '#1890ff',
    borderColor: '#91d5ff'
  }
});

// 设置主题
const setTheme = (newTheme) => {
  theme.value = newTheme;
};

// 提供主题相关数据和方法
provide('theme', theme);
provide('themeStyles', themeStyles);
provide('setTheme', setTheme);
</script>

<style scoped>
.theme-provider {
  padding: 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.theme-controls {
  margin-bottom: 20px;
}

button {
  margin-right: 10px;
  padding: 8px 15px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

button.active {
  background-color: #42b983;
  color: white;
}

/* 浅色主题 */
.light {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
}

/* 深色主题 */
.dark {
  background-color: #333333;
  color: #ffffff;
  border: 1px solid #666666;
}

/* 蓝色主题 */
.blue {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}
</style>

内容组件 (ContentComponent.vue)：

<template>
  <div class="content" :style="themeStyles[theme]">
    <h3>内容组件</h3>
    <p>这个组件会响应主题变化</p>
    <NestedComponent />
  </div>
</template>

<script setup>
import { inject } from 'vue';
import NestedComponent from './NestedComponent.vue';

// 注入主题数据
const theme = inject('theme');
const themeStyles = inject('themeStyles');
</script>

<style scoped>
.content {
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
}
</style>

嵌套组件 (NestedComponent.vue)：

<template>
  <div class="nested" :style="themeStyles[theme]">
    <h4>嵌套组件</h4>
    <p>我也能响应主题变化</p>
    <button @click="setTheme('dark')">切换到深色主题</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 注入主题数据和方法
const theme = inject('theme');
const themeStyles = inject('themeStyles');
const setTheme = inject('setTheme');
</script>

<style scoped>
.nested {
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
}

button {
  background-color: transparent;
  border: 1px solid currentColor;
  color: currentColor;
}
</style>

运行结果：

• 点击不同主题按钮，所有组件的样式会同时变化
• 嵌套组件中的按钮也可以调用注入的setTheme方法切换主题
• 主题切换时有平滑的过渡动画

代码解析：

• 祖先组件提供主题状态、样式变量和切换方法
• 所有后代组件都可以注入并使用这些数据和方法
• 通过CSS变量和动态class实现主题样式切换
• 这种模式非常适合实现全局主题、语言等应用级配置

4.2 用户信息共享

在应用中共享用户登录状态和信息，无需在每个组件中单独请求。

用户提供者 (UserProvider.vue)：

<template>
  <div class="user-provider">
    <h2>用户信息共享</h2>
    <div v-if="user.isLoggedIn" class="user-info">
      <p>欢迎, {{ user.name }}!</p>
      <button @click="logout">退出登录</button>
    </div>
    <div v-else>
      <button @click="login">登录</button>
    </div>
    <Navigation />
    <Content />
  </div>
</template>

<script setup>
import { provide, reactive } from 'vue';
import Navigation from './Navigation.vue';
import Content from './Content.vue';

// 用户状态
const user = reactive({
  isLoggedIn: false,
  name: '',
  email: '',
  role: ''
});

// 登录方法
const login = () => {
  // 模拟登录API请求
  setTimeout(() => {
    user.isLoggedIn = true;
    user.name = '张三';
    user.email = 'zhangsan@example.com';
    user.role = 'admin';
  }, 500);
};

// 退出登录方法
const logout = () => {
  user.isLoggedIn = false;
  user.name = '';
  user.email = '';
  user.role = '';
};

// 提供用户信息和方法
provide('user', user);
provide('login', login);
provide('logout', logout);
</script>

导航组件 (Navigation.vue)：

<template>
  <nav class="navigation">
    <ul>
      <li><a href="#">首页</a></li>
      <li v-if="user.isLoggedIn"><a href="#">个人中心</a></li>
      <li v-if="user.role === 'admin'"><a href="#">管理面板</a></li>
      <li v-if="!user.isLoggedIn"><a href="#" @click.prevent="login">登录</a></li>
    </ul>
  </nav>
</template>

<script setup>
import { inject } from 'vue';

// 注入用户信息和登录方法
const user = inject('user');
const login = inject('login');
</script>

内容组件 (Content.vue)：

<template>
  <div class="content">
    <h3>主要内容区域</h3>
    <div v-if="user.isLoggedIn">
      <p>您已登录，欢迎使用系统</p>
      <p>邮箱: {{ user.email }}</p>
      <p>角色: {{ user.role }}</p>
    </div>
    <div v-else>
      <p>请先登录以使用完整功能</p>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 注入用户信息
const user = inject('user');
</script>

运行结果：

• 初始状态显示"请先登录"，导航栏只有首页和登录选项
• 点击登录按钮后，所有组件同时更新为登录状态：
  • 显示欢迎信息和用户详情
  • 导航栏显示个人中心和管理面板选项
• 点击退出登录按钮，所有组件同时切换回未登录状态

代码解析：

• 使用reactive创建响应式用户对象
• 提供登录和退出方法，集中管理用户状态
• 所有需要用户信息的组件可以直接注入使用
• 实现了应用级别的状态共享，避免了重复请求用户数据

五、注意事项和最佳实践

5.1 常见问题与解决方案

问题1：注入的数据不是响应式

// 错误示例：提供原始值而非响应式对象
const count = 0;
provide('count', count); // 非响应式

// 正确示例：使用ref或reactive包装
const count = ref(0);
provide('count', count); // 响应式

问题2：直接修改注入的响应式数据

// 子组件中
const user = inject('user');

// 不推荐：直接修改注入的对象
user.name = '新名称';

// 推荐：调用提供的修改方法
const updateName = inject('updateName');
updateName('新名称');

问题3：注入键命名冲突

// 不推荐：使用简单字符串作为键
provide('user', userData);

// 推荐：使用Symbol作为键
import { userKey } from './keys';
provide(userKey, userData);

问题4：过度使用provide/inject

// 不推荐：所有数据都使用provide/inject
provide('smallComponentState', someState); // 只在父子组件间使用的数据

// 推荐：只对跨多层级共享的数据使用
provide('appTheme', theme); // 应用级别的数据

5.2 最佳实践

实践1：创建Provide/Inject组合式函数

将相关的provide和inject逻辑封装为组合式函数，提高复用性。

// composables/useTheme.js
import { provide, inject, ref, reactive } from 'vue';

// 创建注入键
const themeKey = Symbol('theme');
const themeStylesKey = Symbol('themeStyles');
const setThemeKey = Symbol('setTheme');

// 提供者组合式函数
export function useThemeProvider() {
  const theme = ref('light');
  
  const themeStyles = reactive({
    light: { /* 样式 */ },
    dark: { /* 样式 */ }
  });
  
  const setTheme = (newTheme) => {
    theme.value = newTheme;
  };
  
  provide(themeKey, theme);
  provide(themeStylesKey, themeStyles);
  provide(setThemeKey, setTheme);
  
  return { theme, setTheme };
}

// 消费者组合式函数
export function useThemeInject() {
  const theme = inject(themeKey);
  const themeStyles = inject(themeStylesKey);
  const setTheme = inject(setThemeKey);
  
  if (!theme || !themeStyles || !setTheme) {
    throw new Error('useThemeInject must be used within a useThemeProvider');
  }
  
  return {
    theme,
    themeStyles,
    setTheme
  };
}

使用组合式函数：

// 提供者组件
<script setup>
import { useThemeProvider } from './composables/useTheme';
useThemeProvider();
</script>

// 消费者组件
<script setup>
import { useThemeInject } from './composables/useTheme';
const { theme, themeStyles, setTheme } = useThemeInject();
</script>

实践2：提供明确的接口

为注入的数据和方法提供明确的接口文档，说明每个注入项的用途和类型。

// types/theme.d.ts
export interface ThemeProvider {
  /** 当前主题名称 */
  theme: Ref<string>;
  /** 主题样式变量 */
  themeStyles: Record<string, ThemeStyle>;
  /** 设置主题的方法 */
  setTheme: (themeName: string) => void;
}

export interface ThemeStyle {
  bgColor: string;
  textColor: string;
  borderColor: string;
}

实践3：限制注入数据的修改权限

只提供必要的修改方法，避免直接暴露响应式对象的修改权限。

// 推荐做法
const user = reactive({ name: '张三', age: 30 });

// 只提供需要的方法，不直接暴露user
provide('getUserName', () => user.name);
provide('setUserName', (newName) => {
  // 可以在这里添加验证逻辑
  if (newName && newName.length > 2) {
    user.name = newName;
  }
});

实践4：在应用入口统一管理

在应用入口（如App.vue）集中管理所有全局共享的数据和方法。

<!-- App.vue -->
<script setup>
import { useThemeProvider } from './composables/useTheme';
import { useUserProvider } from './composables/useUser';
import { useI18nProvider } from './composables/useI18n';

// 集中提供应用级服务
useThemeProvider();
useUserProvider();
useI18nProvider();
</script>

六、总结

6.1 provide与inject核心知识点

• 基本概念：跨层级组件通信方式，祖先组件提供数据，后代组件注入使用
• 使用方式：
  • 祖先组件：provide(key, value) 提供数据
  • 后代组件：inject(key, [defaultValue], [validator]) 注入数据
• 响应式传递：
  • 使用ref或reactive包装数据
  • 提供修改方法而非直接暴露数据
• 高级技巧：
  • 使用Symbol避免命名冲突
  • 提供默认值和验证函数增强健壮性
  • 封装组合式函数提高复用性
• 适用场景：
  • 深层级组件通信
  • 应用级配置（主题、语言等）
  • 用户状态等全局数据共享

6.2 与其他通信方式的选择指南

通信方式	适用场景	优点	缺点
props/emits	父子组件通信	简单直观，类型安全	深层传递繁琐
provide/inject	跨层级通信	无需逐层传递，使用灵活	数据流向不明显，调试困难
Vuex/Pinia	全局状态管理	可预测性强，调试工具支持	配置复杂，学习成本高
事件总线	任意组件通信	实现简单，使用灵活	维护困难，容易冲突

6.3 何时使用provide/inject

• 当需要在跨多层级的组件间共享数据时
• 当开发组件库，需要在组件树中传递上下文时
• 当需要共享应用级配置（如主题、语言）时
• 当使用组合式API，需要在多个组件中复用逻辑时
• 当数据共享范围不需要全局状态管理的复杂度时

provide和inject是Vue3提供的强大通信机制，特别适合解决深层级组件通信问题。通过合理使用，可以简化组件结构，减少props传递的繁琐代码。然而，也应注意避免过度使用，保持数据流向的清晰，确保应用的可维护性。

掌握provide/inject的使用，结合组合式函数封装，可以构建出更加灵活和可维护的Vue应用。在实际开发中，应根据具体场景选择合适的通信方式，平衡开发效率和代码质量。