Vue子组件emit delete-component事件至父组件时出现警告求助

问题说明 #

Vue项目中实现子组件向父组件触发自定义事件时，close事件可正常工作，但delete-component事件出现异常，两者代码逻辑类似，修改事件命名后问题依旧。

子组件代码 #

emits: ['close', 'delete-component'],
methods: {
    close() {
        this.$emit('close');
    },
    deleteMethod() {
        this.$emit('delete-component', this.index);
    }
},

父组件代码 #

<SmallModal :index="ComponentToDelete" :show="DeletingComponent" 
@delete-component="deleteComponent($event)" @close="DeletingComponent = false">
</SmallModal>

报错信息（中文翻译） #

[Vue警告]：传递给组件的额外非emit事件监听器(deleteComponent)无法自动继承，因为组件渲染的是片段或文本根节点。如果该监听器仅作为组件自定义事件监听器使用，请使用"emits"选项声明它。

解决方法 #

1. 修正父组件事件绑定写法：父组件绑定自定义事件时，无需手动传递$event，直接写@delete-component="deleteComponent"即可，Vue会自动将$emit的参数传入方法：

   <SmallModal :index="ComponentToDelete" :show="DeletingComponent" 
   @delete-component="deleteComponent" @close="DeletingComponent = false">
   </SmallModal>
   

2. 检查子组件根节点结构：如果子组件没有单个根元素（即渲染片段或文本根节点），Vue无法自动将事件监听器绑定到根元素。可以给子组件外层添加容器元素（如<div>），或者确保emits选项中完全正确声明自定义事件名（注意连字符和大小写）。
3. 确认父组件方法有效性：确保父组件已定义deleteComponent方法，且能正确接收子组件传递的index参数：

   methods: {
       deleteComponent(index) {
           // 编写删除逻辑
       }
   }
   

内容的提问来源于stack exchange，提问作者Dávid Michalco