Vue - 子から親にデータを渡す - 基本発光が機能しない

Question

私は基本的なVue2コンポーネントを持っていて、$emitを使って子コンポーネントから親コンポーネントにデータを渡そうとしています。 注： my-componentには、行をクリックするとonRowClickが正常に起動し、コンソールに「foobar」を出力するテーブルが含まれています。何らかの理由で、$ emitで親メソッドを起動することができず、成功はコンソールに記録されていません。これがなぜなのか？私は同じ問題に直面し

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

。私は$ rootを使ってこの問題を解決しました。

親Vueの構成要素の例では

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

と子コンポーネントは次のようにする必要があります：

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

希望はあなたを助けることができます。