이벤트버스에서 parent 함수 호출 방법

이벤트 버스를 이용해서 콤포넌트간 이벤트 및 데이터를 편하게 주고받을 수 있는데요,

코딩을 하다가 하도 안되는게 있어서 좌절할 뻔했습니다..

이유인 즉..

componentB에서 componentA의 close() 를 호출하고 싶었습니다..
공통을 쓰는 여러 변수들도 있었고.. 꼭 호출해야만 하는 상황이었고.

하지만 아무리 해도 undefinded 만 계속 나오고, 함수도 못찾고..

아래 테스트 코드입니다.. (콤포넌트 부분만 발췌)

var eventBus = new Vue()  var componentA = {      template: '<div>A임</div>',      created: function () {          eventBus.$on('closeA', function () {                       //close() close 못찾음              //this.close() close 못찾음. this는 eventBus임.              //this.$parent.close() $parent 못찾음. this는 eventBus이기 때문에 $parent가 없음.              //componentA.close() componentA. 을 사용할 수 없음          })           },      methods: {          close: function () {              console.log("닫음")          }      }  }  var componentB = {      template: '<div>B임<br><button @click="close"></button></div>',      methods: {          close: function () {              eventBus.$emit('closeA')          }      }  }

간단하게 생각했던 코드가 복잡해지려고 하는 순간..

event bus의 문법을 다시 찾아보니,

eventBus.$on('함수명', function () {

})

이렇게 되어 있었습니다. 위에 써있는 그대로죠.

두번째 인자가 함수인데.. 콤포넌트의 함수가 들어가도 될까? 해서 넣어봤습니다.

정말 몇시간 헤맨 끝에 이게 되다니...

아래 완성코드 입니다 ㅋㅋ

var eventBus = new Vue()  var componentA = {      template: '<div>A임</div>',      created: function () {          eventBus.$on('closeA', this.close)      },      methods: {          close: function () {              console.log("닫음")          }      }  }  var componentB = {      template: '<div>B임<br><button @click="close"></button></div>',      methods: {          close: function () {              eventBus.$emit('closeA')          }      }  }

역시 이거저거 해보면 다 되네요 ㅎㅎ