Vue3中 inject()函数使用方法及示例代码详解

原创 2025-06-07 09:58:13编程技术

503

在 Vue3 的组件通信中，provide 和 inject 是实现祖先组件向后代组件跨层级传递数据的重要 API。本文ZHANID工具网将详细讲解 inject() 函数的使用方法，并结合示例代码演示其核心场景。

一、依赖注入的核心概念

依赖注入（Dependency Injection）是一种设计模式，允许祖先组件通过 provide 暴露数据，后代组件通过 inject 接收数据，无需逐层传递 props。适用于以下场景：

跨多层级组件共享数据
避免 props 层层透传的冗余代码
全局配置或主题样式传递

二、基础用法详解

2.1 祖先组件提供数据

在祖先组件中使用 provide 选项（或 setup() 函数内）暴露数据：

// 祖先组件（如 App.vue）
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('light');
    const user = { name: 'John', role: 'admin' };

    // 提供数据
    provide('theme', theme);       // 响应式数据
    provide('user', user);         // 普通对象（非响应式）
    provide('apiUrl', 'https://api.example.com'); // 静态值
  }
};

2.2 后代组件注入数据

在后代组件中使用 inject() 函数接收数据：

// 后代组件（如 UserProfile.vue）
import { inject } from 'vue';

export default {
  setup() {
    // 注入数据（第三个参数为默认值）
    const theme = inject('theme', 'light'); // 未提供时默认 'light'
    const user = inject('user', { name: 'Guest' });
    const apiUrl = inject('apiUrl');

    return { theme, user, apiUrl };
  }
};

三、高级功能与最佳实践

3.1 响应式数据传递

当需要保持数据响应性时，必须使用 ref 或 reactive 包装数据：

// 祖先组件
import { provide, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      theme: 'dark',
      settings: { fontSize: 14 }
    });

    provide('appState', state); // 注入的 state 是响应式的
  }
};

// 后代组件
import { inject } from 'vue';

export default {
  setup() {
    const appState = inject('appState');

    // 修改响应式数据（祖先组件会同步更新）
    appState.theme = 'light';
    appState.settings.fontSize = 16;
  }
};

3.2 TypeScript 类型声明

通过 InjectKey 定义类型，提升类型安全性：

// types/injection-keys.ts
import { InjectionKey } from 'vue';

export const ThemeKey: InjectionKey<string> = Symbol('theme');
export const UserKey: InjectionKey<{ name: string; role: string }> = Symbol('user');

// 祖先组件
import { provide } from 'vue';
import { ThemeKey, UserKey } from './types/injection-keys';

export default {
  setup() {
    provide(ThemeKey, 'light');
    provide(UserKey, { name: 'John', role: 'admin' });
  }
};

// 后代组件
import { inject } from 'vue';
import { ThemeKey, UserKey } from './types/injection-keys';

export default {
  setup() {
    const theme = inject(ThemeKey, 'light'); // 类型推导为 string
    const user = inject(UserKey); // 类型推导为 { name: string; role: string }
  }
};

3.3 修改注入的响应式数据

通过返回函数实现可控修改：

// 祖先组件
import { provide, ref } from 'vue';

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

    // 提供数据 + 修改函数
    provide('counter', { count, increment });
  }
};

// 后代组件
import { inject } from 'vue';

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

    return { count, increment };
  }
};

四、完整示例：主题切换功能

4.1 祖先组件（ThemeProvider.vue）

<template>
  <button @click="toggleTheme">切换主题</button>
  <slot></slot>
</template>

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

export default {
  setup() {
    const isDark = ref(false);

    const toggleTheme = () => {
      isDark.value = !isDark.value;
    };

    // 提供主题状态和切换方法
    provide('theme', { isDark, toggleTheme });

    return { isDark, toggleTheme };
  }
};
</script>

4.2 后代组件（Navbar.vue）

<template>
  <nav :class="themeClass">
    <!-- 导航内容 -->
  </nav>
</template>

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

export default {
  setup() {
    const { isDark } = inject('theme');
    const themeClass = computed(() => isDark.value ? 'dark-theme' : 'light-theme');

    return { themeClass };
  }
};
</script>

<style>
.dark-theme {
  background: #333;
  color: white;
}
.light-theme {
  background: #fff;
  color: #333;
}
</style>

五、注意事项

响应式陷阱
直接注入普通对象会失去响应性，需确保祖先组件使用 ref/reactive 包装数据。
命名冲突
推荐使用 Symbol 作为注入键，避免字符串键名冲突：
```
const ThemeSymbol = Symbol('theme');
provide(ThemeSymbol, 'dark');
```
作用域限制
inject 默认从最近祖先组件查找，可通过 from 参数指定来源：
```
const data = inject('key', default, true); // 从任何祖先查找
```
慎用全局注入
过度使用依赖注入会降低组件可维护性，建议仅在必要场景使用。