이벤트 버스를 이용해서 콤포넌트간 이벤트 및 데이터를 편하게 주고받을 수 있는데요,
코딩을 하다가 하도 안되는게 있어서 좌절할 뻔했습니다..
이유인 즉..
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')
}
}
} |
역시 이거저거 해보면 다 되네요 ㅎㅎ