插槽不感知加载状态，骨架屏须由父组件控制显隐；推荐父组件用v-if或provide/inject传递数据就绪信号，或结合Suspense管理异步插槽，UI库Skeleton仅作条件占位。

Vue 插槽本身不感知加载状态，骨架屏占位必须由父组件或异步边界主动控制，不能依赖插槽是否存在来判断内容是否就绪。

插槽内容未就绪时，别直接用 $slots 判断

插槽是编译时静态解析、运行时动态挂载的，$slots.default 在 setup 中读取可能为空或返回 VNode 数组，但无法反映“是否已渲染完成”。尤其在异步场景下，$slots.default?.().length > 0 只适用于作用域插槽已执行的情况，不可靠。

• 避免在子组件 setup 里直接读 this.$slots 或 slots 做 loading 切换
• 不推荐用 v-if="!!$slots.default" 控制骨架屏显隐——插槽存在 ≠ 内容已加载
• 真正需要的是“数据就绪”信号，而非“插槽有内容”信号

推荐方案：父组件控制 v-if 或 provide/inject 传递就绪状态

把插槽内容的加载逻辑上提到父组件，由它决定何时渲染含插槽的子组件。这是最清晰、最可控的方式。

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 父组件发起请求，设 dataLoaded = false；请求成功后设为 true
• 用 —— 插槽只在数据到位后才被挂载
• 若需子组件内部响应，可用 provide({ slotReady: ref(false) })，父组件在数据就绪后更新该 ref

异步插槽场景：用 defineAsyncComponent + Suspense

当插槽内容来自动态导入的子模块（如路由级异步组件），应交由 Vue 原生异步机制统一管理，而不是手动维护 loading 状态。

• 用 defineAsyncComponent(() => import('./Header.vue')) 包裹插槽内容
• 外层套 ，骨架屏写在 #fallback 插槽中
• 这样插槽内容和它的加载态完全解耦，且能自然继承错误边界与超时控制
• 注意：骨架屏内禁止触发新请求，否则会破坏 Suspense 的状态流

Element Plus / Ant Design Vue 骨架屏组件怎么配合插槽

这些 UI 库的 Skeleton 组件本身不处理插槽加载逻辑，而是作为占位 UI 被条件渲染。关键仍是控制它的显示时机。

• 例如： 和 并列使用
• 不要把 塞进插槽里当默认内容——它不是插槽的 fallback，而是整个区块的 loading 替代物
• 复杂布局可组合 ，比如头像+标题+段落，自动适配比例，无需手动调宽高

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！