Vue.js $emit 事件触发但没有任何反应

Question

我正在尝试从 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）工作正常。

Answer 1

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

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

并且您的 'EmitFunction()' 在您的方法中执行您的 'clicked' 正在执行的操作。

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

并在您的组件中...

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

Vue.js $emit 事件触发但没有任何反应

Vue.js $emit Event Triggering But Nothing Happens

javascript

vue.js

events

emit