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를 사용하여이 문제를 해결했습니다.

부모 뷰 구성 요소의 예를 들어

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

그리고 하위 구성 요소는 다음과 같이해야합니다 :

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

희망이 당신을 도울 수 있습니다.