本文介绍如何在 vue 3 的 script setup 语法下，不依赖 pinia 等状态管理库，通过共享 ref 实现深层嵌套组件（如组件5 → 组件4）之间的高效数据传递，兼顾简洁性与响应性。
本文介绍如何在 vue 3 的 script setup 语法下，不依赖 pinia 等状态管理库，通过共享 ref 实现深层嵌套组件（如组件5 → 组件4）之间的高效数据传递，兼顾简洁性与响应性。
在 Vue 3 的组合式 API 场景中，当组件层级较深（如题中 Parent → 2 → 5 和 Parent → 3 → 4 的非直系关系），传统 props / emit 链式透传不仅冗长易错，也违背关注点分离原则。此时，一个轻量、可复用、响应式的“简易状态仓库”是更优解——它本质上是一个导出的响应式引用（ref），被多个组件导入并共同读写。
✅ 推荐方案：基于 ref 的共享状态仓库（Composable 风格）
创建一个独立的 composables/useSharedState.js（更符合 composables 语义）：
// composables/useSharedState.js
import { ref } from 'vue'
// 导出一个具名 ref，支持类型推导和默认值
export const useSharedData = () => {
const value = ref(null)
const update = (newValue) => {
value.value = newValue
}
return {
value, // 响应式数据
update // 安全更新方法（可选，增强可维护性）
}
}
// 或更简洁的导出（适用于简单场景）：
// export const sharedData = ref(null)? 在组件5（数据源）中更新状态：
<!-- Component5.vue -->
<script setup>
import { useSharedData } from '@/composables/useSharedState'
const { update } = useSharedData()
const sendData = () => {
update({ message: 'Hello from Component 5!', timestamp: Date.now() })
}
</script>
<template>
<button @click="sendData">Send to Component 4</button>
</template>? 在组件4（数据接收方）中响应式监听：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<!-- Component4.vue -->
<script setup>
import { useSharedData } from '@/composables/useSharedState'
const { value } = useSharedData()
// value 是响应式 ref，可直接在模板中使用，或配合 watch 处理副作用
</script>
<template>
<div v-if="value">
<h3>Received:</h3>
<pre class="brush:php;toolbar:false;">{{ value }}
No data yet.
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
避免直接导出裸
ref()：如原答案中export const myStore = ref('')虽可行，但缺乏封装性与可扩展性；推荐使用useXxx函数式 composable，便于未来添加逻辑（如重置、校验、持久化）。 -
命名清晰：仓库名应体现用途（如
useFormData、useNotificationState），而非泛化的myStore。 -
类型安全：若使用 TypeScript，务必为
ref<t></t>显式标注类型，例如ref(null)。 - 生命周期无关：该方案不依赖组件挂载/卸载，适合全局轻量状态；但不适用于需严格作用域隔离或高并发更新的复杂状态（此时应升级至 Pinia）。
? 总结：对于“组件5 → 组件4”这类跨分支、无直接父子关系的数据流，基于 ref 的共享状态仓库是最小可行且高度契合 Vue 3 组合式 API 设计哲学的方案。它无需额外依赖、零配置、天然响应，并可通过 composables 封装实现逻辑复用与团队协作友好性。
