Vue.js组件通信Slots实现列表空状态EmptyState全局自定义-Vue.js-PHP中文网

Vue.js中通过具名Slot解耦空状态逻辑，由可配置的全局EmptyState组件统一处理，支持属性定制、主题扩展、默认配置注入及事件透传。

vue.js组件通信slots实现列表空状态emptystate全局自定义

Vue.js 中通过 Slots 实现列表空状态（EmptyState）的全局自定义，核心在于将空态逻辑从具体业务组件中解耦，交由可复用、可插拔的组件处理，并支持内容定制与主题扩展。

用具名 Slot 传递空状态内容

在封装的列表组件（如）中，判断数据为空时，不直接渲染固定文案，而是预留具名插槽：

<template v-if="list.length === 0"><slot name="empty"><emptystate></emptystate></slot></template>

这样，父组件可自由传入定制内容：

<list :data="users"><template><emptystate title="暂无用户" description="点击右上角添加新用户" icon="user-plus"></emptystate></template></list>

构建可配置的 EmptyState 全局组件

EmptyState.vue 应支持基础属性（title、description、icon、action）和插槽扩展，同时兼容主题切换：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

props 定义常用字段：title（String）、description（String）、icon（String 或 VNode）、showAction（Boolean）、actionText（String）
预留 default 插槽用于完全自定义内容（如动效 SVG、表单入口等）
内部使用 provide/inject 或全局配置（如 app.config.globalProperties.$emptyConfig）读取默认文案/图标前缀，实现主题级统一

注册为全局组件并注入默认行为

在 main.js 中注册并预设通用逻辑：

app.component('EmptyState', EmptyState)
app.config.globalProperties.$emptyConfig = {
  defaultTitle: '暂无数据',
  defaultIcon: 'data-empty',
  iconPrefix: 'iconfont'
}

组件内部通过 getCurrentInstance().appContext.config.globalProperties.$emptyConfig 或组合式 API 的 inject 获取配置，避免硬编码。