agentskills.codes
AN

ant-design-vue-component-binding

by keepstyCodingSource

Provides data binding rules for Vue 3 and Ant Design Vue components.

FrontendVue

Install

mkdir -p .claude/skills/ant-design-vue-component-binding && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12914" && unzip -o skill.zip -d .claude/skills/ant-design-vue-component-binding && rm skill.zip

Installs to .claude/skills/ant-design-vue-component-binding

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Parent-child component data binding patterns for Vue 3 + Ant Design Vue 4.x. Use when designing component interfaces, deciding props/emits/v-model, splitting a page into components, or refactoring data flow between components. This is part of the ant-design-vue skill family — for forms/modals, table pages, or responsive layout, see the sibling skills.
353 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • →Design component Props and Emits interfaces.
  • →Handle `v-model` for single core bidirectional values.
  • →Manage `v-model:xxx` for multiple bidirectional fields.
  • →Control modal `open/close` states.
  • →Process query components and table data transfer.

How it works

This skill defines patterns for parent-child component data binding in Vue 3, emphasizing unidirectional data flow. It uses `defineProps` for data reception and `defineEmits` for event notification.

Inputs & outputs

You give it
parent component data, child component events
You get back
clear, unidirectional data flow between parent and child components

When to use ant-design-vue-component-binding

  • →Designing component data interfaces
  • →Refactoring component data flow
  • →Implementing v-model bindings

About this skill

Component Binding（父子组件数据绑定规则）

你专注于 Vue 3 + JavaScript 的父子组件数据绑定模式。 目标是确保组件间数据流清晰、单向、可维护。

When to Apply

  • 需要拆页面为多个组件时
  • 设计组件 Props / Emits 接口时
  • 处理弹窗表单的 open/close 控制时
  • 处理查询组件与表格的数据传递时
  • 用户提到"组件通信"、"v-model"、"props"、"emit"等关键词

不涵盖的内容

  • 表单弹窗本身 → 参考 [[ant-design-vue-form-modal]]
  • 表格列表页 → 参考 [[ant-design-vue-crud-page]]

总原则

  • 父组件负责：数据源、状态控制、接口调用
  • 子组件负责：展示、局部交互、事件抛出
  • 坚持单向数据流，避免子组件直接改父组件状态

Props

  • 子组件通过 defineProps 接收数据
  • 不允许直接修改 props
  • 传入对象或数组时，子组件也不要直接改原值

Emit

  • 子组件通过 defineEmits 通知父组件
  • 事件命名要直白：
    • submit
    • cancel
    • change
    • update:open
    • update:value

v-model

  • 组件只有一个核心双向绑定值时，优先使用 v-model
  • 有多个双向字段时，使用 v-model:xxx
  • 弹窗开关统一推荐：
    • 父组件：v-model:open
    • 子组件：接收 open，派发 update:open

典型模式

弹窗表单

  • 父组件：
    • 管 open
    • 管 currentRow
    • 管提交接口
    • 管刷新列表
  • 子组件：
    • 接收 open、formData
    • 抛出 submit、cancel、update:open
    • 负责展示、编辑、校验
    • 子组件表单不要自己偷偷发请求并改父组件列表

表格 + 查询

  • 父组件：
    • 管 queryForm
    • 管 tableData
    • 管分页和请求
  • 子组件：
    • 查询组件只抛查询条件，不直接控制表格刷新
    • 表格组件只抛分页、选择、行操作事件

技术约束

  • Vue 3 + script setup
  • JavaScript（不使用 TypeScript）

When not to use it

  • →When dealing with form modals directly.
  • →When managing table list pages directly.

Limitations

  • →Does not cover form modals.
  • →Does not cover table list pages.
  • →Requires Vue 3 + JavaScript.

How it compares

This skill provides specific patterns for Vue 3 + Ant Design Vue 4.x component binding, ensuring data flow clarity and maintainability compared to ad-hoc communication methods.

Compared to similar skills

ant-design-vue-component-binding side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
ant-design-vue-component-binding (this skill)01moNo flagsIntermediate
screenshot-to-code2042moNo flagsBeginner
vue-best-practices195moNo flagsIntermediate
web-component-design55moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by keepsty

View all by keepsty →

mcp-builder

keepsty

MCP 服务器构建方法论 — 系统化构建生产级 MCP 工具，让 AI 助手连接外部能力

00

chinese-documentation

keepsty

中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用，不要根据上下文自动触发。

00

ant-design-vue-design-tokens

keepsty

>

00

You might also like

screenshot-to-code

OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

204389

vue-best-practices

antfu

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

1950

web-component-design

wshobson

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

548

vue

antfu

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

1031

vue-testing-best-practices

vuejs-ai

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

534

vue-debug-guides

vuejs-ai

Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

431

Search skills

Search the agent skills registry