本文介绍如何在 Vue 3 的 语法下，不依赖 Pinia 等状态管理库，通过共享 ref 实现深层嵌套组件（如组件 5 → 组件 4）之间的高效数据传递，兼顾简洁性与响应性。
本文介绍如何在 vue 3 的 `<script setup>` 语法下，不依赖 pinia 等状态管理库，通过共享 `ref` 实现深层嵌套组件（如组件 5 → 组件 4）之间的高效数据传递，兼顾简洁性与响应性。</script>
在 Vue 3 的组合式 API 场景中，当组件层级较深（如 Parent → Child2/Child3 → Grandchild4/Grandchild5），且需跨分支传递状态（例如从组件 5 向组件 4 发送数据），传统 props / emit 链式透传不仅冗长易错，还破坏组件封装性。此时，基于 ref 的轻量级共享状态是一种简洁、低侵入、高响应性的替代方案——它本质是利用 Vue 响应式系统的底层能力，无需引入额外状态库即可实现“全局可观测、局部可读写”的通信效果。
✅ 推荐实践：创建可复用的响应式 Store 文件
新建一个 stores/sharedData.js（或任意语义化路径）：
// stores/sharedData.js
import { ref } from 'vue'
// 导出一个响应式引用，所有导入它的组件共享同一份响应式状态
export const sharedMessage = ref('')
export const sharedPayload = ref(null) // 支持任意类型：字符串、对象、数组等
? 在目标组件中使用（以组件 5 和组件 4 为例）
组件 5（发送方）——更新共享状态：
<!-- Component5.vue -->
<script setup>
import { sharedMessage } from '@/stores/sharedData'
const sendMessage = () => {
sharedMessage.value = '来自组件5的实时消息'
// 或发送结构化数据
sharedPayload.value = { timestamp: Date.now(), from: 'Component5' }
}
</script><template><button>向组件4发送数据</button>
</template>
组件 4（接收方）——订阅响应式变化：
<!-- Component4.vue -->
<script setup>
import { sharedMessage, sharedPayload } from '@/stores/sharedData'
// 自动响应 sharedMessage.value 的变更
</script><template><div>
<h3>接收到的消息：</h3>
<p>{{ sharedMessage }}</p>
<pre class="brush:php;toolbar:false;">{{ sharedPayload }}
