Vue 组件事件命名设计原则与规范

陌婷同学_8461

陌婷同学_8461

2026-06-29

228人浏览

原创

vue组件事件命名必须用kebab-case,如@user-updated;需语义清晰、动词开头,避免原生事件名和状态描述,v-model绑定时须匹配update:xxx格式。

vue 组件事件命名设计原则与规范

Vue 组件事件命名不是随便起个名字就行,核心是让父组件能一眼看懂“这个事件干了什么”,同时和 Vue 的大小写转换机制配合好,避免出错。

事件名必须用 kebab-case(短横线分隔)

这是最硬性的规范。无论你在 defineEmits 里怎么写,在模板中监听时都得用小写加短横线形式,比如 @user-updated、@item-removed。原因很实际:HTML 属性不区分大小写,@userUpdated 和 @userupdated 在 DOM 中会被当成同一个东西,容易出 bug。

  • ✅ 正确写法:@input-changed、@form-submitted
  • ❌ 错误写法:@inputChanged、@submit(与原生事件冲突)、@update(太模糊)

语义清晰,动词+名词结构优先

事件名要表达“发生了什么动作”,而不是“状态是什么”。推荐用动词开头,说明组件内部做了什么操作,方便父组件准确响应。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.1万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习