Question

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

我从ontabselected组件发出事件Tabs，如下所示：

this.$emit('ontabselected', tab);

sayHelloFromRoot方法驻留在根vue实例中，仅包含一行：

sayHelloFromRoot(){
    console.log('hello');
}

但是当我在tab之间切换时，在vue-devtools中我看到发生的事件，但在控制台中我看不到你好打印。

Answer 1

您应该在<tabs>而不是<div>上收听活动，例如：

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

它的工作方式与任何其他事件侦听器相同。我们来看一个例子：

<!-- MyFile.vue -->
<div>
  <button @click="sayHello"/>
</div>

总的来说。这里的逻辑逻辑是监听发出事件的组件或元素上的事件。在这种情况下，当您作为用户单击按钮时，会在按钮（不在包装器div上）触发click事件。实际上，即使是在MyFile.vue内部的上部组件（<button>），您也会听到它。

即使我们回到root并只使用html，它的工作方式也是类似的：

<div>
  <button onclick="console.log('Hello')"/>
</div>

你不知道按钮如何触发事件，它被封装在按钮内。但是你知道它可以发出那个事件，你知道界面，你可以听它。

如果事件是在root中实现的，那么很难知道是什么按钮。（感谢@Ferrybig）