vue - ref

하나의 부모 컴포넌트 하위에 2개의 자식 컴포넌트가 있는데, 자식 컴포넌트1에서 클릭 이벤트를 상위로 보내주면, 그 이벤트를 받아 자식 컴포넌트2에서 특정 메서드(scrollTo(x, y))를 실행을 해줘야 하는 상황이 발생해서, ref 속성을 사용하게 되었다.

vueJS에서는 props나 event를 주로 사용하지만, div에 직접적으로 접근해서 기능을 줘야할 경우가 있다.
즉, Javaascript로 props나 event를 거치지 않고, 자식 컴포넌트에 직접 접근할 수 있는 속성,기능 이다. 이 경우 제어가 필요한 element에 ref 속성을 부여해줌으로써 직접 접근할 수 있다.

Javascript에서는 getElementById, querySelector 등과 비슷한 역할을 한다.

WARNING
$refs는 컴포넌트가 렌더링 된 후 존재하게 된다.(초기 렌더링에서 엑세스 할 수 없음)
해당 속성은 자식 요소에 접근하기 위해서만 사용되어야 한다.
template나 computed 속성에서 $refs에 접근하면 오류가 발생한다.

예시

config.vue 하위에 config-snb.vue, config-category.vue 컴포넌트에게 특정 기능을 부여해보자.

config.vue 에서 activeScrollToUp() 메서드에서 ref를 console.log로 확인해보면, 하위 컴포넌트에 담겨져 있는 모든 것들을 확인할 수 있다. (ref, slots, methods, data...)

• config-snb.vue (하위 컴포넌트1)

<button @click="clickEvent"></button>

// 클릭 이벤트를 상위 config.vue로 보내준다.
methods: {
  clickEvent(){
    const event = 'ex-event';
    this.$emit(event)
  }
}

• config.vue (상위 부모 컴포넌트)

<config-snb 
  @ex-event="exEvent"
>
</config-snb>

<config-category
  ref="activeScrollToUpDiv"
>
</config-category>


methods: {
  activeScrollToUp(){
    // console.log로 ref를 찍어보면, 
    // 하위 컴포넌트2 의 class, method, computed 등을 확인할 수 있다.(아래 이미지 첨부)
    console.log(this.$refs.activeScrollToUpDiv)
    this.$refs.activeScrollToUpDiv.scrollToUp();
  }

  // activeScrollToUp 실행
  exEvent() {
    this.activeScrollToUp();
  }
}

• config-category.vue (하위 컴포넌트2)

<div class="body" ref="scrollToUpDiv">
</div>

methods: {
  // config-snb에서 클릭 이벤트를 보내면, 해당 메서드 실행한다.
  scrollToUp(){
    this.$refs.scrollToUpDiv.scrollTo(0, 0);
  }
}

Reference

참고
참고
참고