插槽接管空状态渲染可将其转化为业务入口；因empty-text仅支持静态字符串，而插槽支持动态内容、条件渲染、多场景复用及主题统一。
直接用插槽接管空状态的渲染，就能把“暂无数据”变成引导入口、品牌触点或交互起点——不是加个图标完事，而是让空状态真正参与业务流程。
为什么插槽比 empty-text 更有效
empty-text 只能传字符串，样式固定、无事件、无法响应状态变化。插槽则允许你：
- 嵌入 SVG 图标、按钮、搜索框、表单甚至视频引导
- 绑定 v-if/v-for 实现条件展示（如“加载中”“网络错误”“权限不足”不同提示）
- 复用同一套空态组件到表格、卡片流、下拉选择器等多种场景
- 配合 provide/inject 或全局配置统一主题（比如所有空状态默认用蓝色图标+主色按钮）
三步完成空状态插槽接入
以通用列表组件 MyList.vue 为例：
-
组件内声明插槽位置：在 data.length === 0 的分支里写
<slot name="empty"><p>暂无数据</p></slot>，fallback 文案保底不崩 -
父组件注入内容：使用时加
<template #empty><EmptyGuide /></template>，可传任意结构，支持作用域参数（如<template #empty="{ retry, error }">） - 封装 EmptyState 全局组件：抽离成独立组件，接收 title/description/icon/actionText 等 props，并预留 default 插槽兜底，便于跨项目复用
真实场景中的高价值用法
空状态不是摆设，是用户旅程的关键节点：
- 首次进入页面：展示功能简介 + “立即创建”按钮，降低上手门槛
- 搜索无结果：显示模糊匹配建议 + 清空关键词快捷操作
- 权限受限：说明原因 + 跳转申请入口链接
- 分页到底部：结合上拉加载组件，用 empty 插槽展示“没有更多了”带动效文案
避坑提醒
几个容易忽略但影响体验的细节：
- 插槽内容需有足够垂直留白，避免紧贴列表边框；建议外层加 padding 或用 flex/center 布局居中
- 若空状态含按钮，确保 focus 可达、键盘可操作，满足无障碍要求
- 服务端返回空数组和请求失败要区分处理——别让错误态误显示成“暂无数据”
- Vuex/Pinia 中管理空状态相关逻辑时，避免在 setup() 里重复判断 length，建议封装 useEmptyState() 组合式函数
