[Vuejs] EventBus에서 this 사용법

예제를 잘못 찾았는지 몰라도, 아니면 사용법을 잘 몰랐던 것이거나..

javascript를 오랜만에 하면서 여러 문법들이 많이 생겨났다는 것을 알았다.

대표적으로 함수의 사용법이었는데..(다들 알고 있는 것을 나만 잘 몰랐음..)

뭐 그건 그렇고..

Vue에서 axios를 자주 쓰는데, 원래 ajax로 통신하던걸 axios로 바꾸다 보니 새로운 문제가 생겼다.

바로 메인 콤포넌트의 변수를 바로 사용하지 못한다는 것..

var eventbus = new Vue()

var vm = new Vue({

el: '#app',

data: {

name: ''

},

created: function () {

eventbus.$on('test', function () {

this.name = '고양이'

})

}

})

위 예제처럼 쓰라는 곳이 많았다. 

결론은 안된다.

저기서 this 는 eventbus 자신이 된다.. (디버깅해보니 eventbus의 내용들이 나온다.)

그래서 혹시 parent 로 하면 쓸 수 있지 않을까? 했는데 그건 Window 로 나온다..

역시 사용법을 잘 몰라서 였던가..

여러 예제를 전전한 결과.. 이렇게 사용하면 되네..

var eventbus = new Vue()

var vm = new Vue({

el: '#app',

data: {

name: ''

},

created: function () {

eventbus.$on('test', function () {

this.name = '고양이'

}.bind(this))

}

})

아~~ 왜 이걸 몰랐을까...

Vue에서 왜 Vue.변수(지금은 vm.name 으로 하는 것)로 바로 접근하는 것은 쓰지 말라는지 알겠다.

역시 바인드,...바인딩.. 제일 많이 사용한다.. 모두 바인딩 되어있어 ㅋㅋ