Vue - Übergeben von Daten von Kind zu Eltern - Basic emittiert nicht funktioniert

Question

Ich habe eine grundlegende Vue2-Komponente und ich versuche, Daten von der untergeordneten auf die übergeordnete Komponente mit $emit zu übergeben. Hinweis, my-component enthält eine Tabelle. Wenn ich auf eine Zeile klicke, wird onRowClick erfolgreich ausgelöst und gibt "foobar" an die Konsole aus. Aus irgendeinem Grund ist es mir nicht möglich, die übergeordnete Methode zum Auslösen von $ em zu veranlassen, und der Erfolg wird nicht in der Konsole protokolliert. Irgendeine Idee warum das ist?

import Vue from 'vue'; 
import MyComponent from "./components/MyComponent.vue"; 

window.onload = function() { 
    var main = new Vue({ 
     el: '#app-v2', 
     components: { MyComponent }, 
     methods: { 
     onCouponApplied(data) { 
      console.log("Success, coupon applied, " + data); 
      this.saying = "Sunglasses are " + data; //Sunglasses are cool 
     } 
     }, 
     data: { 
     contactEditPage: { 
      saying: "" 
     } 
     } 
    }); 
} 

MyComponent.vue

export default { 
     methods: { 
      onRowClick(event){ 
       this.$emit('applied', 'Cool'); 
       console.log("foobar"); 
      } 

HTML

<div id="app-v2"> 
    <my-component @applied="onCouponApplied"></my-component> 
    {{ saying }} //trying to output: sunglasses are cool 
</div> 

Answer 1

stand ich das gleiche Problem. Ich habe dieses Problem mit $ root behoben.

Zum Beispiel in Mutter Vue Komponente

mounted(){ 
    this.$root.$on('event-name',function(value){ 
     // code 
    }); 
}, 

Und Kindkomponente sollte wie folgt sein:

this.$root.$emit('event-name',[data]); 

Hoffnung kann Ihnen helfen.