第2章 2.4 provide/inject 跨级传值
🎯 开场：为什么需要跨级传值？
上一章我们学了生命周期钩子，知道 Vue 组件从创建到销毁有一套完整的「生老病死」流程。但有个问题一直没说——数据怎么传？
之前的章节里，父组件往子组件传值用的是 props，子组件往父组件传值用的是 $emit。这个我们已经在「第2章 2.2 组件通信」里学过。
但如果遇到这种情况呢？
App（曾祖父）
└── Layout（曾祖母）
└── Sidebar（爷爷）
└── MenuItem（爸爸）
└── Icon（儿子）
你想让 App 里的数据直接传给最底层的 Icon，用 props 一层层往下传，得写 4 次 props 定义，烦不烦？
痛点来了：
- 层级一深，props 传递就像「传话游戏」，中间每个人都得知道这个信息
- 中间某个组件根本不关心这个数据，但它不得不帮忙传
- 哪天要改个变量名，得翻好几个文件
学完这一章，你就能：父组件放一个「共享柜」，\n\n
\n\n
\n\n任意层级子组件直接拿，不用中间人。
🧱 基础：核心概念（3 个知识点）
2.4.1 provide：父组件的「共享柜」
是什么？
provide 的字面意思是「提供」，你可以理解成父组件在门口放了个共享柜，声明「这些东西你们随便拿」。
为什么要用？
不用一层层往下传了，直接放公共区域，需要的人自己来取。
怎么用？
# 这是伪代码，帮助理解概念
# 真实 Vue3 代码在下面
# 父组件声明
provide("用户信息", {"name": "小明", "age": 18})
provide("主题色", "dark")
Vue3 真实代码：
<script setup>
import { provide } from 'vue'
// provide(key, value) - key 用字符串或 Symbol
provide('userInfo', { name: '小明', age: 18 })
provide('theme', 'dark')
</script>
解释：provide('userInfo', ...) 第一个参数是「柜子的名字」，第二个是你要共享的内容。
2.4.2 inject：子组件的「直接拿」
是什么？
inject 的字面意思是「注入」，你可以理解成子组件直接伸手进共享柜，不用打招呼不用申请，看见了就拿。
为什么要用？
子组件不需要知道数据从哪来，只需要知道「去名叫 XXX 的柜子里拿」。
怎么用？
<script setup>
import { inject } from 'vue'
// inject(key) - 填共享柜的名字
const userInfo = inject('userInfo')
const theme = inject('theme')
console.log(userInfo) // 输出: { name: '小明', age: 18 }
console.log(theme) // 输出: dark
</script>
就这么简单！父组件 provide，子组件 inject，配对就自动拿到。
2.4.3 Symbol 作 key：防止命名冲突
是什么？
之前例子用字符串作 key（比如 'userInfo'），万一另一个组件也用了 'userInfo' 怎么办？
Symbol 是 JavaScript 的一种数据类型，每个 Symbol 都是独一无二的，像身份证号一样不会重复。
为什么要用？
大型项目中多人合作，防止 key 名起冲突。就像你 locker 用密码锁，别人就算知道有「userInfo」这个柜子，也不知道密码（Symbol）是多少。
怎么用？
<!-- userSymbols.js - 专门放 Symbol 的地方 -->
<script setup>
import { inject } from 'vue'
// 创建一个 Symbol
export const USER_INFO_KEY = Symbol('userInfo')
export const THEME_KEY = Symbol('theme')
</script>
<!-- 父组件 Parent.vue -->
<script setup>
import { provide } from 'vue'
import { USER_INFO_KEY, THEME_KEY } from './userSymbols.js'
provide(USER_INFO_KEY, { name: '小明', age: 18 })
provide(THEME_KEY, 'dark')
</script>
<!-- 子组件 Child.vue -->
<script setup>
import { inject } from 'vue'
import { USER_INFO_KEY, THEME_KEY } from './userSymbols.js'
const userInfo = inject(USER_INFO_KEY)
const theme = inject(THEME_KEY)
console.log(userInfo) // 输出: { name: '小明', age: 18 }
</script>
2.4.4 响应式 provide：数据变了自动更新
是什么？
之前 provide 的数据是静态的，如果父组件的数据变了，子组件拿到的还是旧值。
加上 ref 或 reactive，让 provide 的数据响应式——父组件改，子组件自动更新。
为什么要用？
实际项目中，数据往往会变。比如用户登录状态、主题切换，不能传个固定值就完事了。
怎么用？
<!-- 父组件 -->
<script setup>
import { provide, ref, reactive } from 'vue'
// 响应式数据
const count = ref(0)
const user = reactive({ name: '小明', level: 1 })
// 用 ref/reactive 包一层再 provide
provide('count', count)
provide('user', user)
// 3 秒后修改，验证子组件是否自动更新
setTimeout(() => {
count.value++
user.level = 5
}, 3000)
</script>
<!-- 子组件 -->
<script setup>
import { inject } from 'vue'
const count = inject('count')
const user = inject('user')
console.log(count.value) // 一开始是 0，3 秒后变成 1
console.log(user.level) // 一开始是 1，3 秒后变成 5
</script>
注意：inject 拿到的 ref，在子组件里不需要 .value，Vue3 自动帮你拆包了。
🔥 实战：3 个递进项目
项目 1：最小的 provide/inject 例子（5 分钟）
目标：理解 provide 和 inject 怎么配对工作。
<!-- App.vue - 共享柜放置者 -->
<script setup>
import { provide } from 'vue'
import Child from './Child.vue'
provide('appName', '我的待办清单')
provide('version', '1.0.0')
</script>
<template>
<Child />
</template>
<!-- Child.vue - 直接拿数据的人 -->
<script setup>
import { inject } from 'vue'
import Grandson from './Grandson.vue'
const appName = inject('appName')
const version = inject('version')
console.log(`应用: ${appName}, 版本: ${version}`)
</script>
<template>
<div>
<p>来自爷组件的数据：{{ appName }} v{{ version }}</p>
<Grandson />
</div>
</template>
<!-- Grandson.vue - 跨了两层照样拿 -->
<script setup>
import { inject } from 'vue'
const appName = inject('appName')
</script>
<template>
<p>爷组件的 AppName 是：{{ appName }}</p>
</template>
预期输出：页面显示「来自爷组件的数据：我的待办清单 v1.0.0」和「爷组件的 AppName 是：我的待办清单」。
解释：看，App.vue 到 Grandson.vue 隔了两层，但 Grandson 根本不需要知道数据从哪来，直接 inject 就有。
项目 2：主题切换系统（15 分钟）
目标：用 provide/inject 做一个主题系统，子组件可以读取和修改主题。
<!-- ThemeProvider.vue - 主题供应商 -->
<script setup>
import { provide, ref, computed } from 'vue'
import ContentArea from './ContentArea.vue'
const theme = ref('light')
// 提供主题数据和切换方法
provide('theme', theme)
provide('toggleTheme', () => {
theme.value = theme.value === 'light' ? 'dark' : 'light'
})
// 计算属性：主题背景色
const bgColor = computed(() => theme.value === 'light' ? '#ffffff' : '#1a1a1a')
provide('bgColor', bgColor)
</script>
<template>
<div :style="{ background: bgColor }" class="theme-provider">
<ContentArea />
</div>
</template>
<style scoped>
.theme-provider {
min-height: 100vh;
padding: 20px;
transition: background 0.3s;
}
</style>
<!-- ContentArea.vue - 中间层，不关心数据但帮忙传 -->
<script setup>
import Header from './Header.vue'
import Sidebar from './Sidebar.vue'
</script>
<template>
<div class="content">
<Header />
<Sidebar />
</div>
</template>
<style scoped>
.content {
display: flex;
gap: 20px;
}
</style>
<!-- Header.vue - 使用主题的组件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
const toggleTheme = inject('toggleTheme')
</script>
<template>
<header class="header">
<h1>我的应用</h1>
<button @click="toggleTheme">
切换到{{ theme === 'light' ? '深色' : '浅色' }}模式
</button>
</header>
</template>
<style scoped>
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #f5f5f5;
border-radius: 8px;
}
.dark .header {
background: #2a2a2a;
color: white;
}
</style>
<!-- Sidebar.vue - 另一个使用主题的组件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
const bgColor = inject('bgColor')
</script>
<template>
<aside :style="{ background: theme === 'light' ? '#f0f0f0' : '#333' }">
<p>当前主题：{{ theme }}</p>
<p>背景色：{{ bgColor }}</p>
</aside>
</template>
<style scoped>
aside {
padding: 20px;
border-radius: 8px;
color: inherit;
}
</style>
预期输出：点击按钮，深色/浅色主题切换，所有组件同步变化。
解释：Header 和 Sidebar 都可以直接拿到主题数据并修改，不需要通过 props 一层层传。
项目 3：用户权限系统（15 分钟）
目标：组合 provide/inject + 响应式，做一个权限控制系统。
<!-- App.vue - 根组件，权限控制中心 -->
<script setup>
import { provide, ref, computed } from 'vue'
import Dashboard from './Dashboard.vue'
// 用户状态
const currentUser = ref({
name: '小王',
role: 'admin' // admin, editor, viewer
})
// 权限配置
const permissions = {
admin: ['read', 'write', 'delete', 'export'],
editor: ['read', 'write', 'export'],
viewer: ['read']
}
// 提供用户信息和权限检查函数
provide('user', currentUser)
provide('permissions', permissions)
provide('hasPermission', (action) => {
const userPermissions = permissions[currentUser.value.role] || []
return userPermissions.includes(action)
})
provide('canDelete', () => currentUser.value.role === 'admin')
</script>
<template>
<Dashboard />
</template>
<!-- Dashboard.vue - 仪表盘，中间层 -->
<script setup>
import UserInfo from './UserInfo.vue'
import ActionButtons from './ActionButtons.vue'
</script>
<template>
<div class="dashboard">
<UserInfo />
<ActionButtons />
</div>
</template>
<style scoped>
.dashboard {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
</style>
<!-- UserInfo.vue - 显示用户信息 -->
<script setup>
import { inject } from 'vue'
const user = inject('user')
</script>
<template>
<div class="user-info">
<h2>当前用户：{{ user.name }}</h2>
<p>角色：<strong>{{ user.role }}</strong></p>
</div>
</template>
<style scoped>
.user-info {
padding: 15px;
background: #e3f2fd;
border-radius: 8px;
margin-bottom: 20px;
}
</style>
<!-- ActionButtons.vue - 根据权限显示不同按钮 -->
<script setup>
import { inject, computed } from 'vue'
const user = inject('user')
const hasPermission = inject('hasPermission')
const canDelete = inject('canDelete')
const visibleActions = computed(() => {
const actions = []
if (hasPermission('read')) actions.push('查看')
if (hasPermission('write')) actions.push('编辑')
if (hasPermission('export')) actions.push('导出')
if (canDelete()) actions.push('删除')
return actions
})
const handleAction = (action) => {
const messages = {
'查看': '打开详情页...',
'编辑': '进入编辑模式...',
'导出': '导出数据...',
'删除': '删除确认...'
}
console.log(messages[action])
}
</script>
<template>
<div class="actions">
<h3>可执行操作</h3>
<div class="buttons">
<button
v-for="action in visibleActions"
:key="action"
@click="handleAction(action)"
>
{{ action }}
</button>
</div>
<p class="tip" v-if="visibleActions.length === 0">您没有任何操作权限</p>
</div>
</template>
<style scoped>
.actions {
padding: 20px;
background: #f5f5f5;
border-radius: 8px;
}
.buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
background: #2196f3;
color: white;
}
button:hover {
background: #1976d2;
}
.tip {
color: #999;
font-style: italic;
}
</style>
预期输出：页面显示当前用户信息，根据 admin 角色显示「查看、编辑、导出、删除」四个按钮。
解释：根组件 App 掌控所有权限逻辑，子组件只需要调用 hasPermission() 方法来判断自己能干什么，数据流清晰。
💪 进阶：常见坑 + 调试技巧
坑 1：inject 拿不到值，报 undefined
<!-- ❌ 错误写法：inject 找不到 key -->
<script setup>
const theme = inject('theme') // 没找到，返回 undefined
console.log(theme.value) // 报错：Cannot read property 'value' of undefined
</script>
<!-- ✅ 正确写法：给默认值 -->
<script setup>
const theme = inject('theme', 'light') // 找不到就用默认值 'light'
</script>
原因：provide 还没执行，或者 key 拼写错了。
坑 2：provide 的是普通值，不是响应式的
<!-- ❌ 错误写法：数据变了，子组件不知道 -->
<script setup>
const count = 0
provide('count', count)
setTimeout(() => {
count = 5 // 改了，但子组件拿到的还是 0
}, 1000)
</script>
<!-- ✅ 正确写法：用 ref/reactive 包起来 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
provide('count', count)
setTimeout(() => {
count.value = 5 // 子组件自动更新
}, 1000)
</script>
坑 3：Symbol key 忘了导出
// ❌ 错误写法：key 定义在组件内部 -->
<script setup>
import { provide, Symbol } from 'vue'
const MY_KEY = Symbol('myKey') // 每次 import 都是新的 Symbol！
provide(MY_KEY, 'value')
</script>
// 另一个文件
<script setup>
import { inject, Symbol } from 'vue'
const MY_KEY = Symbol('myKey') // 不一样！拿不到值
inject(MY_KEY) // undefined
</script>
// ✅ 正确写法：key 放到单独文件到处用 -->
// symbols.js
export const MY_KEY = Symbol('myKey')
// 父组件
import { provide } from 'vue'
import { MY_KEY } from './symbols.js'
provide(MY_KEY, 'value')
// 子组件
import { inject } from 'vue'
import { MY_KEY } from './symbols.js'
inject(MY_KEY) // 拿到 'value'
坑 4：inject 不要用 .value（但 ref 要用）
<!-- ❌ 错误写法：多此一举 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
console.log(theme.value) // 如果 theme 是 ref，确实能拿到，但 Vue 已经帮你拆包了
</script>
<!-- ✅ 正确写法：直接用 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
console.log(theme) // 直接拿到值
</script>
原因：Vue3 的 provide/inject 会自动拆 ref 包。
坑 5：provide 的 key 重复，后面的覆盖前面的
<!-- ❌ 错误写法 -->
<script setup>
import Parent from './Parent.vue'
import Child from './Child.vue'
provide('theme', 'light') // 第一次
</script>
<template>
<Parent /> <!-- Parent 里又 provide('theme', 'dark') -->
<Child /> <!-- Child inject('theme') 拿到 dark -->
</template>
调试技巧：用 console.log 配合 inject 检查：
// 在子组件里
const theme = inject('theme')
console.log('theme:', theme) // 看看能不能拿到
// 如果拿到了但值不对，检查父组件的 provide 顺序
✏️ 练习题
练习 1（2 分钟）：改 key 名
- 输入：把项目 1 的 appName 改成 appTitle
- 预期输出：页面仍正常显示，只是 console 的 key 变了
- 提示：需要改 3 个文件（App.vue、Child.vue、Grandson.vue）
练习 2（2 分钟）：加默认值
- 输入：给 inject('version', '0.0.0') 加默认值
- 预期输出：即使父组件没 provide，子组件也不报错
- 提示：inject 第二个参数就是默认值
练习 3（5 分钟）：新增一个 provide
- 输入：在项目 2 的 ThemeProvider 里增加 provide('fontSize', 16)
- 预期输出：Sidebar 能显示当前字体大小
- 提示：记得在 Sidebar 里 inject
练习 4（10 分钟）：权限系统升级
- 输入：在项目 3 里增加 editor 角色的用户，验证权限是否正确
- 预期输出：editor 角色看不到「删除」按钮
- 提示：改 App.vue 里 currentUser.value.role = 'editor'
练习 5（3 分钟）：找错
- 输入：下面代码有什么问题？
const count = inject('count')
count.value++ // 报错
- 预期输出：说出错误原因
- 提示：检查 provide 那边的数据类型
作业：做一个「网站设置共享中心」
做一个多层级组件系统，实现：
1. 设置中心（根组件）：包含主题色（light/dark）、字体大小、是否显示侧边栏
2. 布局组件（中间层）：渲染 Header、Sidebar、MainContent
3. 设置面板（深层组件）：3 个开关控制上述 3 个设置
4. 内容展示（深层组件）：根据设置显示不同样式
功能点：
- 点击设置面板的开关，内容区实时响应
- 至少 4 层组件嵌套，验证 provide/inject 能穿透
加分项：
- 设置状态用 localStorage 持久化
- 加入「恢复默认」按钮
验收标准：能跑起来、4 层以上嵌套、开关切换生效
📚 总结
本文学了 3 个核心点：
- provide 是父组件的「共享柜」，放什么别人就能拿什么
- inject 是子组件的「伸手党」，不用中间人直接拿
- Symbol 作 key 防止命名冲突，响应式 provide 让数据自动同步
下一章我们要做一个小项目，把这 3 章（组件通信、生命周期、provide/inject）串起来——做一个完整的 Todo List 应用。
推荐资源：
- Vue3 官方文档 - Provide / Inject（英文）或有中文版
- 《Vue3 设计原理》- 深入理解响应式系统
- B 站「技术蛋老师」Vue3 视频（生活化讲解）
互动钩子：你在实际项目里用过 provide/inject 吗？遇到过什么奇葩问题？评论区聊聊，老粉优先回复！
评论(0)