插槽接管空状态渲染可将其转化为业务入口；因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><emptyguide></emptyguide></template>，可传任意结构，支持作用域参数（如 <template retry error></template>）
• 封装 EmptyState 全局组件：抽离成独立组件，接收 title/description/icon/actionText 等 props，并预留 default 插槽兜底，便于跨项目复用

真实场景中的高价值用法

空状态不是摆设，是用户旅程的关键节点：

• 首次进入页面：展示功能简介 + “立即创建”按钮，降低上手门槛
• 搜索无结果：显示模糊匹配建议 + 清空关键词快捷操作
• 权限受限：说明原因 + 跳转申请入口链接
• 分页到底部：结合上拉加载组件，用 empty 插槽展示“没有更多了”带动效文案

避坑提醒

几个容易忽略但影响体验的细节：

• 插槽内容需有足够垂直留白，避免紧贴列表边框；建议外层加 padding 或用 flex/center 布局居中
• 若空状态含按钮，确保 focus 可达、键盘可操作，满足无障碍要求
• 服务端返回空数组和请求失败要区分处理——别让错误态误显示成“暂无数据”
• Vuex/Pinia 中管理空状态相关逻辑时，避免在 setup() 里重复判断 length，建议封装 useEmptyState() 组合式函数