Vue.js $发出事件触发但没有发生任何事情

Question

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

我已经尝试重命名事件，确保函数在click事件上工作，绑定到不同的组件和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

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

//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>