Javascript Vue js 2:此.$emit不触发

我有一个简单的代码来测试子组件和父组件之间的通信。下面是vuejs文档中的示例：。但显然它在父组件上不起作用

我的朋友：

html:

Vue.component（'tasks-item'{
模板：'{item.title}}}x',，
道具：['item']，
方法：{
deleteItem：函数（项）{
console.log（'child click'）
document.getElementById（'output'）.innerHTML='child click:'+item.title
此.$emit（'deleteItem'）
}
}
})
Vue.组件（‘任务列表’{
模板：“#任务列表”，
道具：[“任务”]，
方法：{
deleteTask:function（）{
document.getElementById（'output'）。innerHTML='parent click'
}
}
})
新Vue({
el:“#应用程序”，
数据：函数（）{
返回{
数据：[{“id”：51，“title”：“rr4434”，“content”：“rtrrtrtr”}，{“id”：50，“title”：“rrrrr”，“content”：“rrr”}，{“id”：49，“title”：“rrr”，“content”：“rrr”}，{“id”：48，“title”：“rrr”}，{“id”：47，“title”：“rrr”，“content”：“rrr”}，
{“id”：46，“标题”：“c\u00f4 d\u00e2\u0300n”，“内容”：“pha\u0309i khong em”}，
{“id”：45，“标题”：“我们就是你”，“内容”：“内容”}，
{“id”：44，“title”：“cai min nek”，“content”：“co gi kh\u00f4ng”}，{“id”：43，“title”：“abc”，“content”：“dghjj”}，{“id”：42，“title”：“dddddd”，“content”：“ddd”}，{“id”：38，“title”：“444”，“content”：“4444”}，{“id”：36，“title”：“rrr”，“content”：“rrr”；“rr
}
},
方法：{
}
})

单击“输出”

更改

this.$emit（'deleteItem'）

到

this.$emit（'delete-item'）

和模板内固定组件的v-on从

v-on:deleteItem

到

v-on：删除项目

---

您可以在

中阅读更多内容，您需要使用事件中心。文档中说要使用vue实例作为中心，这样您可以创建一个库，导出一个新的vue实例并将其导入到需要通信的每个组件中，或者您可以使用根实例与任何组件中的此“$root.$emit”和此“$root.$on”，因为它们都共享同一根，我会看看，我会试试，我会让你知道的cheers@vbranden：谢谢，$root帮忙了！制作事件总线比使用$root要好得多