Vue3组合式API：如何定义带点语法成员的emit事件

你看到的@someEvent.customMember写法，本质是带命名空间的事件名称——Vue允许事件名包含点号，它就是一个普通的字符串事件名，并非给someEvent添加成员。实现步骤如下：

1. 子组件定义带点号的事件 #

在组合式API中，直接通过defineEmits声明完整的带点事件名即可：

// 数组形式
const emit = defineEmits(['someEvent.customMember'])

// 或者对象形式（可添加事件校验）
const emit = defineEmits({
  'someEvent.customMember': null // 若需校验，可替换为函数，比如(val) => typeof val === 'string'
})

2. 子组件触发该事件 #

在需要触发事件的逻辑中，直接调用emit并传入完整的事件名：

// 可携带自定义参数
emit('someEvent.customMember', '自定义数据')

3. 父组件绑定事件 #

就用你给出的写法绑定即可：

<MyComponent @someEvent.customMember="onHandler_1" />

额外说明 #

如果需要实现同一类事件下的不同子场景（比如someEvent下有customMember、anotherMember两个子类型），可以用这种点号命名空间的方式归类事件，让代码语义更清晰。每个带点的事件都是独立的，彼此互不影响。

内容的提问来源于stack exchange，提问作者Jamie Marshall