Vue.js $emit 事件触发但什么也没发生答案

【问题标题】：Vue.js $emit Event Triggering But Nothing HappensVue.js $emit 事件触发但什么也没发生
【发布时间】：2019-09-20 16:42:14
【问题描述】：

我正在尝试从 Vue 中的子组件调用 $emit 事件来触发 App.vue 中的函数。该事件正在根据 Vue 检查器触发，并且 DOM 检查器显示 DIV 已设置为触发该事件，但没有任何反应。

我尝试重命名事件，确保函数在单击事件上工作，绑定到不同的组件和 div，并且事件中不包含有效负载。似乎没有任何效果。我已经尝试了 Firefox 和 Chrome，并且都以相同的结果结束：调用事件而没有发生任何事情。

子组件和方法

<div class="navbutton" v-on:click="clicked(data.id)">
  <p>{{data.text}}</p>
</div>

clicked(id){
switch(id){
    case 1:
       alert("One");
       break;
    case 2:
        this.$emit('testemit');
        break;
    case 3:
        alert("Three");
        break;
    case 4:
        alert("Four");
        break;
    default:
        alert("DEFAULT");
        break;
    }
}

来自 App.vue

<div v-on:testemit="EmitFunction"></div>

EmitFunction() {
    alert('MESSAGE');
}

我希望在单击第二个按钮时收到一条提示“MESSAGE”的警报，但是没有任何反应。其他三个按钮（1、3 和 4）工作正常。

【问题讨论】：

在App.vue 中，您在div 上收听testemit，但它应该在子组件上，例如<my-child v-on:testemit="EmitFunction" />
@tony19 我已经试过了。我尝试从项目中的每个组件调用事件。
您在下面的评论表明您正在从嵌套的子组件发出事件，但从App 监听它。请注意，Vue 事件仅发送到直接父级，它们不会像原生事件那样冒泡。要将事件传播到树上，您必须在每个级别重新发出事件（根据深度，这可能会很笨拙）。考虑改用事件总线（或状态管理系统，例如 Vuex）。

标签： javascript vue.js events emit

【解决方案1】：

您需要实际激活一个发出并监听父组件，如下所示：

//app.vue
<template>
  <my-component v-on:testemit="EmitFunction"/>
</template>

并且您的“EmitFunction()”在您的方法中执行您“点击”正在执行的操作。

methods: {
  EmitFunction(id) {
    switch... etc

在你的组件中...

//myComponent.vue
<div class="navbutton" v-on:click="$emit('testemit', id)">
  <p>{{data.text}}</p>
</div>

【讨论】：

并没有直接解决我的问题，我仍然需要上一个父级（导航按钮是应用程序下的两个子级），但它让我走上了正确的道路。