Vue.js 中通过 provide/inject 传递响应式引用的正确用法

作者：袖梨 2026-06-30

在 Vue 3 组合式 API 中，通过 provide 传递 ref 对象后，子组件 inject 得到的是该响应式引用本身（即 Ref<T>），而非其 .value；模板中应直接访问 selectedReceipt.id，而非 selectedReceipt?.value?.id，否则首次渲染时因响应式依赖未触发而报 undefined。

在 vue 3 组合式 api 中，通过 `provide` 传递 `ref` 对象后，子组件 `inject` 得到的是该响应式引用本身（即 `ref`），而非其 `.value`；模板中应直接访问 `selectedreceipt.id`，而非 `selectedreceipt?.value?.id`，否则首次渲染时因响应式依赖未触发而报 `undefined`。

当使用 provide/inject 在父子组件间共享响应式状态时，一个常见误区是混淆了“引用对象”与“引用值”的访问方式。你已在父组件中正确声明并提供了一个 ref：

const selectedReceipt = ref([]);provide('selectedReceipt', selectedReceipt); // ✅ 提供的是 ref 实例

这意味着子组件注入得到的 selectedReceipt 本身就是一个 Ref<any[]> 类型的对象（即包含 .value 属性的响应式包装器），而非解包后的原始值。

因此，在子组件模板中，应直接使用 selectedReceipt.id（等价于 selectedReceipt.value?.id），因为 Vue 模板语法会自动对 Ref 进行 .value 解包（仅限模板中）：

<a :href="'printDetails/' + selectedReceipt?.id">Print</a><!-- ✅ 正确：Vue 模板自动读取 .value -->

而以下写法是错误的：

立即学习“前端免费学习笔记（深入）”；

<a :href="'printDetails/' + selectedReceipt?.value?.id">Print</a><!-- ❌ 错误：手动访问 .value 在模板中冗余且易引发 undefined 错误 -->

⚠️ 注意事项：

模板中无需显式 .value：Vue 3 模板对 Ref 类型有自动解包机制（仅限顶层属性访问，如 selectedReceipt.id、selectedReceipt?.hospitals?.en_name）；
逻辑代码中必须用 .value：在 setup()、watch、computed 等 JavaScript 上下文中，需显式访问 selectedReceipt.value 才能读取/修改值；

watch 需监听 .value 的变化：你当前的 watch(() => selectedReceipt, ...) 实际监听的是 ref 对象本身的引用变化（极少发生），应改为监听其值：

watch(() => selectedReceipt.value, (newVal) => {  if (newVal && newVal.length > 0) {    const receipt = newVal[0]; // 假设为单条数据    master_Filter.value.hospital_id = receipt.hospitals?.en_name;    master_Filter.value.assessment_date = receipt.assessment_date;    master_Filter.value.maktoob_no = receipt.maktoob_no;    master_Filter.value.maktoob_date = receipt.maktoob_date;    getDetails();  }}, { immediate: true, deep: true });

初始化防御性检查：由于 selectedReceipt 初始为 ref([])，首次注入时 selectedReceipt.value 是空数组，访问 selectedReceipt.value.id 会得 undefined。建议在模板中使用可选链 + 空值回退，或在 watch 中加判空逻辑。

✅ 最佳实践总结：