Vue中@delete-task二次emit时eslint报v-on指令错误如何解决

你遇到的这个eslint报错和事件修饰符无关，本质是v-on指令的绑定语法写错了，导致eslint-plugin-vue的规则校验无法识别你的绑定值，才抛出了要求提供v-on值或修饰符的提示。

具体错误点在Tasks.vue的模板代码中：

<!-- 错误写法：@delete-task后面用了冒号: 绑定值 -->
<Task @delete-task:"$emit('delete-task', task.id)" :task="task" />

Vue模板语法中，所有指令（包括v-on即简写@）绑定值都必须使用等号=，你写成冒号后，解析器会判定@delete-task指令没有绑定对应执行逻辑，因此触发校验报错。

将@delete-task后的冒号替换为等号即可：

<!-- 正确写法 -->
<Task @delete-task="$emit('delete-task', task.id)" :task="task" />

修改后eslint报错会自动消失，事件透传逻辑也可以正常运行：Task组件触发的delete-task事件会被Tasks组件捕获，再向上传递对应task的id值。

内容的提问来源于stack exchange，提问作者Sinan Yaman