vue에서 이벤트 버스 바인딩이 늦는 오류 해결

✅ 문제

center값이 바뀌면 자식 컴포넌트에서 이벤트 버스를 받아 로직을 처리해야 하는데

자식 컴포넌트에서 이벤트 버스가 받아지지 않았다.

 

- Parent.vue

watch{
   center(){
   	this.$bus.$emit("eventBus")
    }
  }

- Childrun.vue

  created: async function() { 
     ...
    await this.method();
    this.$bus.$on("eventBus", this.someMethod);
     ...
  },

✅ 이유 : vue에서 이벤트 버스를 할 때 이벤트 바인딩을 늦게하기 때문에!

await는 프로미스가 resolve 될 때 까진 그 뒤의 로직은 실행되지 않고 대기중이다.

때문에 Childrun 컴포넌트가 create 될 때 await 뒤에 eventBus를 받는 로직은 대기중인데

이때 Parent에서 이벤트 버스를 보내었고, Childrun에는 그 eventbus를 받을 수 없었던 것이다.

 

뒤늦게 프로미스가 resolve된 뒤 eventBus가 걸어지게 되어 someMethod는 실행되지 않는다.

 

✅ 해결

이 코드에선 여러 api의 순서를 보장하는게 아니기 때문에 async-await 로직이 굳이 필요하지 않다.

회사코드에 이런 로직이 많은데(내가쓴 코드 아님;;) 습관적으로 쓴 이 구문을 지워 해결했다.

 

✅ 느낀점

1. 이벤트 바인딩 순서에 의존하는 코드를 만들지 말자

2. 자주 사용하는 코드일 수록 그 본래 원리를 잘 알고 사용하자