Vue子组件向父组件触发ontabselected事件无响应问题

嘿，我一眼就瞅出问题所在啦！你现在把自定义事件ontabselected绑定在了外层的<div>上，但Vue组件的自定义事件可不是这么玩的～

问题根源 #

Vue组件通过$emit触发的自定义事件，是组件之间的通信信号，只会传递给它的直接父组件实例，而不是普通的DOM元素。你绑定事件的<div>是个普通HTML节点，它根本接收不到Tabs组件发出的这个自定义事件，所以哪怕devtools显示事件触发了，根实例的sayHelloFromRoot方法也不会执行。

修复方案 #

把事件监听直接移到<tabs>组件标签上就行，修改后的代码是这样的：

<div>
  <tabs @ontabselected="sayHelloFromRoot">
    <tab></tab>
    <tab></tab>
  </tabs>
</div>

原理说明 #

当你切换标签页时，Tabs组件执行this.$emit('ontabselected', tab)，这个事件会向上传递给它的父组件（也就是你的根Vue实例）。现在你在<tabs>标签上监听了这个事件，根实例就能捕获到它，进而触发sayHelloFromRoot方法，控制台自然就会打印出hello啦～

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