[vue.js] 하위 컴포넌트 함수 호출, 새로고침

기능

게시판을 vue로 구현하면서 알림기능을 추가하였다. 

알림기능을 추가하면서 DB의 값이 변경되는 부분을 실시간으로 불러올 방법은 찾지 못하였는데

(vuex를 몰라서 그런 것일수도..)

대신 화면이 새로고침 될 때마다 api를 호출하는 것으로 변경하였다.

 

 

방법

Home.vue 헤더에 Notification.vue를 하위 컴포넌트로 사용하였는데 이때 Notification의 api를 불러오기 위해서

상위 컴포넌트에서 하위 컴포넌트 함수를 부르는 기능이 필요하게 되었다.

 

 

구현

$refs 를 사용하였다.

<Notification ref="notification"></Notification>

 

레퍼런스? 이름을 설정하고

updated() {
  this.$refs.notification.getAlarmHistory();
  this.$refs.notification.$on('reset', this.reset);
},

Home.vue (상위 컴포넌트) 에서 $refs.notification을 사용하여 Notification.vue의 getAlarmHistory() 함수를 호출하였다.

 

 

에러

처음에는 created() 함수 안에 $refs를 사용하였는데 에러가 발생하였다.

 

> [Vue warn]: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'getAlarmHistory')"

 

undefined 한 프로퍼티가 존재한다는 것이었다. $refs.notification이 존재하지 않는다는 것인데 원인을 찾아보니

$refs는 렌더링 된 후에 접근할 수 있다고 한다.

 

vue.js의 라이프 사이클을 찾아 virtusl DOM 이 다시 렌더링 될 때를 찾아 updated() 함수에 넣어주었더니 에러를 해결하였다.