Vue中事件名的命名规范
Vue中事件名的命名规范
起因：
本人之前不太写vue的项目，最近接触了vue的代码，在学习的过程中同时也会伴随着一点疑惑。比如一以下面的父子组件的事件传递为例：
父组件：
显然，父组件有个自定义事件refresh-list需要子组件进行接收。
<BusDevDealAfterBid
...
@refresh-list="queryList"
...
/>
子组件：
...
const emit = defineEmits(["refreshList"]);
...
// 触发事件
emit("refreshList");
我疑惑的点在于，这个事件命名父组件个子组件都不一致，这样可以正确的引用到吗？
结果是可以的。
原因：
不会出现接收不到的情况。在 Vue 中，事件名的命名规范有两种写法：
- kebab-case (短横线分隔)：用在父组件的模板中，如
@refresh-list - camelCase (驼峰式)：用在子组件的
defineEmits中，如refreshList
Vue 会自动进行事件名的转换匹配，以下两种写法是等价的：
<!-- 父组件 -->
<BusDevDealAfterBid @refresh-list="queryList" />
<!-- 子组件 -->
```typescript
const emit = defineEmits(['refreshList']);
// 或
const emit = defineEmits(['refresh-list']);
实际使用时：
// 这三种调用方式都能触发父组件的 queryList 方法
emit('refreshList');
emit('refresh-list');
emit('RefreshList');
Vue 提供了这种灵活性是为了：
- 在模板中使用 kebab-case 更符合 HTML 的书写习惯
- 在 JavaScript 中使用 camelCase 更符合 JavaScript 的命名规范
所以不用担心事件名的大小写或分隔符问题，Vue 会自动处理这种转换。