从孩子到父母的发射事件不起作用答案

【问题标题】：Emitted event from child to parent not working从孩子到父母的发射事件不起作用
【发布时间】：2018-04-11 08:44:21
【问题描述】：

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

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

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

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

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

但是，一旦我在选项卡之间切换，在 vue-devtools 中我会看到发出的事件，但在控制台中我没有看到打印的 hello。

【问题讨论】：

【解决方案1】：

你应该在<tabs>而不是<div>上监听事件，例如：

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

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

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

一般。这里的逻辑逻辑是监听发出事件的组件或元素上的事件。在这种情况下，当您作为用户单击按钮时，click 事件会在 button 上触发（而不是在包装 div 上）。你实际上甚至在上层组件（MyFile.vue）而不是在<button> 内听。

即使我们回到根源并仅使用 html，它的工作方式也类似：

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

您不知道按钮是如何触发事件的，它被封装在按钮内部。但是你知道它可以发出那个事件，你知道接口并且你可以监听它。

如果事件是在根目录中实现的，就很难知道是哪个按钮。（感谢@Ferrybig）

【讨论】：