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>