Vue中子组件触发事件无法被父组件接收的问题求助

我帮你定位到了核心问题——这是Vue事件名大小写处理的典型坑！

问题根源 #

在HTML模板中，属性名是不区分大小写的。当你在父组件模板里写@childToParent="tagsChanged"时，浏览器会自动把这个属性名转换成全小写的@childtoparent，但你的子组件触发的是驼峰格式的childToParent事件，两者名称不匹配，导致父组件完全监听不到这个事件。

修复方案（二选一即可） #

方案1：父组件模板改用短横线分隔的事件名（推荐，符合HTML属性命名规范）

修改父组件中<tagging>标签的事件绑定：

<tagging @child-to-parent="tagsChanged" :tags="some json" :previous-tags="some json"></tagging>

Vue会自动把短横线分隔的事件名映射到子组件中驼峰格式的事件名（child-to-parent → childToParent），这样就能正确匹配了。

方案2：子组件改用全小写的事件名触发

如果不想修改父组件模板，可以调整子组件的$emit事件名：

emitToParent (event) {
  this.$emit('childtoparent', this.value)
}

这样父组件模板里的@childToParent（被浏览器转成childtoparent）就能和触发的事件名匹配。

额外验证点（你已经完成的可以忽略） #

• 你已经通过Vue开发者工具确认emitToParent方法触发，这步没问题
• 父组件的tagsChanged方法拼写正确，没有语法错误
• 子组件的props传递正常（不影响事件监听，但如果props异常可能间接引发其他问题）

内容的提问来源于stack exchange，提问作者Tom Mwenda