은 뷰 연습 뷰 문서 <a href="https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication" rel="nofollow noreferrer">Non parent-child communication</a><br> 을 읽을 때, 나는 그것이 작동하는지 확인 예를 구축하기 위해 노력

Question

아닌 부모 자식 통신은 아래에있는 내 코드입니다 dudi-station에서 dudo-station으로 메시지를 전송하는 동안 on-click으로 작동하지만 작동하지 않습니다.
아무도 도와 줄 수 있습니까? 감사! 이 때문에 문에서

Vue.component('dudi-station', { 
 
\t template: '<div @click="sentMsg">{{dudiMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudiMsg: 'Dudi!!', 
 
    } 
 
    }, 
 
    methods: { 
 
    \t sentMsg: function() { 
 
    \t bus.$emit('callout', this.dudiMsg); 
 
    }, 
 
    } 
 
}); 
 

 
Vue.component('dudo-station', { 
 
\t template: '<div>{{dudoMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudoMsg:'', 
 
    } 
 
    }, 
 
\t created: function() { 
 
    \t bus.$on('callout', function(value) { 
 
    \t this.dudoMsg = value; 
 
     console.log(value) 
 
    }); 
 
    } 
 
}); 
 

 
var bus = new Vue(); 
 
new Vue({ 
 
\t el: '#app', 
 
})

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <dudi-station></dudi-station> 
 
    <dudo-station></dudo-station> 
 
</div>

Answer 1

: bus.$on('callout', function(value) { this.dudoMsg = value; 이 이이 VUE 인스턴스를 의미하지 않습니다. 화살표 기능을 사용하여 'this'가 vue 인스턴스를 의미하는지 확인해야합니다. 다음과 같이 :

Vue.component('dudi-station', { 
 
\t template: '<div @click="sentMsg">{{dudiMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudiMsg: 'Dudi!!', 
 
    } 
 
    }, 
 
    methods: { 
 
    \t sentMsg: function() { 
 
    \t bus.$emit('callout', this.dudiMsg); 
 
    }, 
 
    } 
 
}); 
 

 
Vue.component('dudo-station', { 
 
\t template: '<div>{{dudoMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudoMsg:'', 
 
    } 
 
    }, 
 
\t created: function() { 
 
    \t bus.$on('callout',value => { 
 
    \t this.dudoMsg = value; 
 
     console.log(value) 
 
    }); 
 
    } 
 
}); 
 

 
var bus = new Vue(); 
 
new Vue({ 
 
\t el: '#app', 
 
})

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <dudi-station></dudi-station> 
 
    <dudo-station></dudo-station> 
 
</div>