插槽不感知加载状态，骨架屏须由父组件控制显隐；推荐父组件用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 - 用
<mycard v-if="dataLoaded"><template>...</template></mycard>—— 插槽只在数据到位后才被挂载 - 若需子组件内部响应，可用
provide({ slotReady: ref(false) })，父组件在数据就绪后更新该 ref
异步插槽场景：用 defineAsyncComponent + Suspense
当插槽内容来自动态导入的子模块（如路由级异步组件），应交由 Vue 原生异步机制统一管理，而不是手动维护 loading 状态。
立即学习“前端免费学习笔记（深入）”；
- 用
defineAsyncComponent(() => import('./Header.vue'))包裹插槽内容 - 外层套
<suspense></suspense>，骨架屏写在#fallback插槽中 - 这样插槽内容和它的加载态完全解耦，且能自然继承错误边界与超时控制
- 注意：骨架屏内禁止触发新请求，否则会破坏 Suspense 的状态流
Element Plus / Ant Design Vue 骨架屏组件怎么配合插槽
这些 UI 库的 Skeleton 组件本身不处理插槽加载逻辑，而是作为占位 UI 被条件渲染。关键仍是控制它的显示时机。
- 例如：
<el-skeleton v-if="!dataLoaded" :rows="4" animated></el-skeleton>和<mylist v-else></mylist>并列使用 - 不要把
<el-skeleton></el-skeleton>塞进插槽里当默认内容——它不是插槽的 fallback，而是整个区块的 loading 替代物 - 复杂布局可组合
<el-skeleton-item></el-skeleton-item>，比如头像+标题+段落，自动适配比例，无需手动调宽高
