이벤트 버스로 데이터 전달했을때, 화면단은 갱신되지 않는 이유

JavaScript Vue.js
1

두개의 컴포넌트간 데이터 전달을 이벤트 버스로 전달을 했습니다.
console.log찍어보니, 데이터 전달은 성공했으나, 화면단은 갱신이 되지 않습니다.
Vue는 Two-way 바인딩이라 저절로 갱신되길 기대했으나 안되니 당황스럽네요.
그 이유를 알려주심 감사하겠습니다.

목적은 간단합니다. lets change! 라는 버튼을 누르면
loading…이라는 큰 텍스트가 let change!로 바뀌면 됩니다.
그러나 화면단은 갱신이 안되는 예제입니다.

코드

2

created: function () { // 이벤트 버스 받기 ($on)
taxi.$on(‘callingTaxi’, customer => {
this.msg = customer; //arrow function 사용
});
},

함수 선언이 아니라 arrow 함수로 선언하시면 잘 동작되실 겁니다. callback에서 함수 선언을 사용할 때와 arrow function을 사용할 때 this의 값이 다릅니다.

함수 선언으로 하셨을 때 this를 console.log로 찍어보시면 CompResult 컴포넌트를 가리키지 않고 있습니다.

this에 대한 자세한 설명은 https://poiemaweb.com/js-this 이 글을 한번 참고해보시면 좋습니다.

1개의 좋아요
3

감사합니다. 말씀하신대로 하니까 되네요.

        created: function () { // 이벤트 버스 받기 ($on)
            taxi.$on('callingTaxi', (customer) => {
					 this.msg = customer;
					 console.log(this);
					 console.log(this.msg);
				 });
        },

또한, 말씀하신대로 this가 다르네요.
걍 펑션은 Vue를 가르키고 있고,
화살 펑션은 VueComponent를 가르키고 있네요.

링크주신 this관련 포스팅도 일독하겠습니다.

진심으로 감사합니다.