深层嵌套组件数据传递应避免中间层参与，优先用 provide/inject 直通祖孙（如主题、权限），跨域共享选 Pinia，插槽用作用域插槽接力，慎用 emit 透传链。
深层嵌套组件的数据传递，核心不是“怎么传”，而是“该不该让中间层参与”。真正优雅的方案，是绕过中转、直连源头，同时守住单向数据流和责任边界。
优先用 provide / inject 直通祖孙
当主题配置、表单上下文、权限状态等需要穿透 3 层以上且中间组件不关心时，provide/inject 是最轻量自然的选择：
- 祖先组件在 setup 中用 provide('key', reactive({ ... })) 暴露响应式数据
- 后代任意层级直接 inject('key') 获取，无需 props 透传或事件转发
- 如需控制修改，提供封装好的方法（如 updateTheme(theme)），而非暴露原始响应式对象
- 搭配 readonly() 包裹注入值，防止下游意外变更源头
状态跨域或需多点响应时选 Pinia
如果数据要被侧边栏、导航栏、请求拦截器等分散组件共同读写（比如用户登录态），provide/inject 就力不从心了：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 用 Pinia 定义业务 store，把共享状态和逻辑收口管理
- 各组件只 import store 并调用 store.user = {...} 或 store.logout()
- 天然支持 Devtools 调试、持久化、服务端渲染适配
- 避免事件总线式广播带来的监听泄漏和难以追踪问题
插槽内容需访问深层数据？靠作用域插槽接力
插槽本身不通信，但常因数据缺失导致逻辑卡在某一层。关键在于每层显式暴露所需上下文：
立即学习“前端免费学习笔记（深入）”；
- 子组件用 <slot :id="item.id" :label="item.label"></slot> 主动抛出数据
- 中间层组件在使用子组件时，用 v-slot="{...}" 接收并原样或加工后继续向下 v-bind
- 最终父组件的插槽模板就能拿到完整路径数据：{ id, label, isActive }
- 超过三层频繁透传时，建议封装为组合式函数（如 useMenuItemContext()）统一提供
慎用手动 emit 透传链
emit 本质是点对点通信，所谓“冒泡”全是手动实现的。层层 $emit 容易失控：
- 不要给事件起泛名（如 change），改用语义化命名（update:editor-content）
- 父组件监听后，是否继续 $emit 完全由你决定——不写就是终止，无需额外 API
- 若透传逻辑复杂（带条件、改参数、需拦截），说明已超出 emit 设计场景，应切换到 provide 或 Pinia
- v-model 语法糖可简化 update:modelValue 的透传，但仍建议仅用于表单类双向绑定场景
