插槽加载状态全局封装实战教程

本文深入讲解如何通过插槽机制在 Vue 3 中优雅封装全局加载状态，核心是打造高复用、低侵入的 `LoadingWrapper` 组件——它利用 default/loading/empty/error 四类具名插槽灵活适配不同业务场景，结合 `useAsyncData` 组合式函数统一管理异步逻辑与状态，彻底告别重复的 loading 开关、try/catch 和副作用误触发；同时直击插槽易被忽略的关键细节：避免加载中意外渲染子内容导致性能浪费或水合错误，提供 v-if 保护、副作用暂停等实战方案，让加载态控制既简洁又健壮，真正实现“一次封装，处处受益”。

用插槽封装 Loading 状态，核心是把“加载中”逻辑抽离成可复用组件，同时保留子内容的灵活性——插槽让业务组件专注渲染，Loading 交由容器控制。

用插槽承载真实内容，Loading 状态独立控制

创建一个 LoadingWrapper 组件，接收 loading 布尔值作为 prop，内部用 v-if 控制是否显示骨架屏或 loading 图标，其余区域通过 渲染传入的内容：

• 当 loading=true，只显示加载态（如
  或第三方 loading 组件）
• 当 loading=false，直接透传并渲染默认插槽内容
• 不强制要求子组件配合，任何已有组件都能被包裹，零侵入

支持多插槽：区分加载态、空状态、错误态

进阶场景下，可扩展具名插槽提升表现力：

• default：正常数据内容
• loading：自定义加载 UI（比如带文字的 spinner）
• empty：数据为空时展示（如“暂无内容”图标）
• error：错误态重试入口（含 @click 触发刷新）

父组件按需传入对应插槽，LoadingWrapper 根据内部状态（loading/error/isEmpty）动态切换，逻辑清晰、扩展性强。

结合 Composition API 封装加载逻辑（推荐 Vue 3）

在业务组件中，把请求 + 加载状态管理抽成组合式函数，例如 useAsyncData：

• 返回 loading、data、error、refresh 等响应式状态和方法
• 在模板中将 loading 传给 LoadingWrapper，其他状态用于控制具名插槽显隐
• 避免每个页面重复写 try/catch 和 loading = true/false

这样，一次封装，处处复用；一处更新，全局生效。

注意事项：避免插槽内容意外渲染

插槽本质是编译时分发，不是条件渲染。若未加保护，loading 为 true 时，插槽内容仍会执行初始化（如子组件 onMounted、watch 仍会触发）：

• 用 v-if="$slots.default && !loading" 包裹插槽调用，彻底阻止渲染
• 或在子组件内监听 props.loading，主动暂停副作用（适合复杂子组件）
• 服务端渲染（SSR）时注意插槽内容是否依赖客户端状态，避免水合 mismatch

不复杂但容易忽略，实际项目中常因此出现性能浪费或报错。

以上就是《插槽加载状态全局封装实战教程》的详细内容，更多关于的资料请关注golang学习网公众号！