学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。
蚂蚁设计-vue 组件 —— 学习参考
功能概述
蚂蚁设计-vue 组件 —— 学习参考是一项面向实际任务的技能，主要用于每个蚂蚁设计- v4( Vue 3) 组件的学习和查询指南；对于每个组件, 您得到: 它用于 —— 其变体 —— 一个可运行的 Vue 3。
核心要点
- 它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
使用与执行
从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
结果检查与注意事项
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
ant-design-vue 组件 — 学习参考指南
一份面向 所有 ant-design-vue v4（Vue 3）组件 的学习与速查手册。针对每个组件，您将获得：用途说明 · 可用变体 · 可直接运行的 Vue 3 单文件组件（SFC）示例 · 核心 Props/事件/插槽 · 实用提示。
阅读前须知
- 本指南面向
ant-design-vuev4.2.x（基于 Vue 3）。全局注册的组件使用a-前缀（例如antd—— 其 Props、事件与插槽均不相同（详见「约定」章节）。 - 请首先阅读
references/conventions.md—— 该文件汇总了 所有 组件共用的设计模式（组件注册方式、图标使用、v-model:*语法、事件命名规范、插槽类型、表单集成、主题配置、message/Modal/notification 等全局 API、以及如何运行任意示例）。掌握这些通用约定后，下方所有组件的文档都将清晰易懂。
如何帮助他人学习某个组件
当被问及“如何使用
- 定位组件：在下方索引中找到对应条目，并打开
references/目录下的分类文档文件。 - 讲解顺序如下：一句话说明 用途 → 变体（即该组件提供的不同形态，如尺寸、类型、模式、形状、状态等）→ 一个 最小可运行的 Vue 3 SFC 示例 → 核心 API（关键 Props / 事件 / 插槽）→ 实用提示 及与同类组件（sibling）的选用建议。
- 匹配学习者水平：面向初学者时，优先展示最小示例；再逐步引入变体与边界情况。若用户正从 React 迁移而来，请引导其查阅
conventions.md中的 React→Vue 映射说明。 - 始终采用 Vue 3 编程范式：使用
v-model:value/v-model:checked/v-model:open等语义化绑定；事件统一使用@change等 Composition API 风格写法；并仅使用 具名插槽（named slots）与作用域插槽（scoped slots）（切勿使用 React 风格的 render props 或onChange回调）。 - 运行示例：提供
conventions.md中的 Vite 快速启动指引，或主动协助搭建本地 Playground 环境。
组件索引
| 分类 | 文件 | 组件列表 |
|---|---|---|
| 约定（必读） | conventions.md | 组件注册方式 · 图标 · v-model:* · 事件 · 插槽 · 表单集成 · 主题与设计令牌（theme/tokens） · message/Modal/notification 全局 API · 运行任意示例的方法 |
| 通用 | general.md | Button · FloatButton · Typography · Icon |
| 布局 | layout.md | Divider · Flex · Grid（Row/Col）· Layout · Space |
| 导航 | navigation.md | Anchor · Breadcrumb · Dropdown · Menu · Pagination · Steps |
| 数据录入 | data-entry.md | AutoComplete · Cascader · Checkbox · DatePicker · Form · Input · InputNumber · Mentions · Radio · Rate · Select · Slider · Switch · TimePicker · Transfer · TreeSelect · Upload |
| 数据展示 | data-display.md | Avatar · Badge · Calendar · Card · Carousel · Collapse · Descriptions · Empty · Image · List · Popover · QRCode · Segmented · Statistic · Table · Tabs · Tag · Timeline · Tooltip · Tour · Tree |
| 反馈 | feedback.md | Alert · Drawer · Message · Modal · Notification · Popconfirm · Progress · Result · Skeleton · Spin · Watermark |
| 其他 / 系统级 | other.md | Affix · App · ConfigProvider · theme tokens · util |
单个组件的文档结构
每个分类文档中的组件均遵循统一模板，确保学习路径一致、高效：
### 名称 `` 用途： 一句话概括。 变体： 具有实际意义的不同形式（尺寸 / 类型 / 模式 / 形状 / 状态等）。 示例： 一个完整的、含 目录更多热门AI工具
相关专题
本教程系统讲解 Vue.js 路由管理与状态管理两大核心技能，助你构建健壮的单页应用。路由部分涵盖 Vue Router 4 的安装配置、动态路由参数传递、嵌套路由布局及导航守卫实现登录鉴权，配合路由懒加载优化首屏性能。状态管理部分深入 Pinia 的 Store 定义、Actions 异步处理与 Getters 派生状态，结合 localStorage 实现用户登录态持久化。通过电商后台管理系统的实战案例，你将掌握路由与状态协同工作的
230
2026.05.15
js和vue的关系：1、js作为web开发基石；2、vue.js作为前端框架的崛起；3、js与vue的互补关系；4、js与vue的实践应用。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
353
2024.03.11
vue在线聊天功能实现方法：创建一个vue项目，可以使用vue cli来快速搭建项目等等。想了解更多vue的相关内容，可以阅读本专题下面的文章。
1893
2024.03.01
vue2和vue3双向绑定区别：1、底层实现；2、性能优化；3、响应性系统；4、错误处理和调试；5、模板和渲染函数；6、组合api；7、对typescript的支持；8、composition api和options api的对比等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
467
2024.02.23
VUE下一页功能实现步骤是确定分页参数、获取数据、更新数据、添加按钮事件、更新页码状态、渲染按钮。想了解更多VUE的相关内容，可以阅读本专题下面的文章。
852
2024.01.04
mui和vue的区别：1、MUI 是一个UI框架，而Vue是一个完整的JavaScript框架；2、MUI主要用于构建符合Material Design风格的Web应用，而Vue用于构建各类Web应用；3、MUI主要用于提供UI组件和样式，Vue用于构建复杂的Web应用。php中文网欢迎大家前来学习。
3580
2023.12.13
热门下载
相关下载
精品课程
最新文章
