Vue中事件名的命名规范

Vue中事件名的命名规范

起因：

本人之前不太写vue的项目，最近接触了vue的代码，在学习的过程中同时也会伴随着一点疑惑。比如一以下面的父子组件的事件传递为例：

父组件：

显然，父组件有个自定义事件refresh-list需要子组件进行接收。

    <BusDevDealAfterBid
	  ...
      @refresh-list="queryList"
      ...
    />

子组件：

...
const emit = defineEmits(["refreshList"]);

...
// 触发事件
emit("refreshList");

我疑惑的点在于，这个事件命名父组件个子组件都不一致，这样可以正确的引用到吗？

结果是可以的。

原因：

不会出现接收不到的情况。在 Vue 中，事件名的命名规范有两种写法：

1. kebab-case (短横线分隔)：用在父组件的模板中，如 @refresh-list
2. 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 提供了这种灵活性是为了：

1. 在模板中使用 kebab-case 更符合 HTML 的书写习惯
2. 在 JavaScript 中使用 camelCase 更符合 JavaScript 的命名规范

所以不用担心事件名的大小写或分隔符问题，Vue 会自动处理这种转换。