ref

jude·2022년 2월 15일
0

vue

목록 보기
10/14
post-thumbnail

ref

ref란?

refreference의 약자로, vue에서 간략히 DOM(Document Object Model)에 접근하게 해주는 속성이다.

DOM에 접근하는 것이기 때문에 mounted() 라이프 사이클에서 접근해야 한다.

일반적인 ref를 활용한 DOM 접근 방법

<!-- javascript로 DOM 접근 방법 -->
<template>
  <h1 class="memo">memo</h1>
</template>

<script>
export default {
  mounted() {
    const h1El = document.querySelector('.memo');
    console.log(h1El); // <h1 class="memo">memo</h1>
  }
}
</script>
<!-- ref로 접근 방법 -->
<template>
  <h1 ref="memo">memo</h1>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.memo); // <h1>memo</h1>
  }
}
</script>

컴포넌트 ref 참조

자식 컴포넌트에 ref 속성으로 최상위 요소를 참조할 수 있다.

자식 컴포넌트의 루트 요소가 1개일 경우의 참조

<!-- App.vue -->
<template>
  <Memo ref="memo" />
</template>

<script>
import Memo from '~/components/Memo'

export default {
  components: {
    Memo
  },
  mounted() {
    console.log(this.$refs.memo.$el); // <h1>메모</h1>
  }
}
</script>
<!-- Memo.vue -->
<template>
  <h1>메모</h1>
</template>

자식 컴포넌트의 루트 요소가 2개 이상일 경우의 참조

<!-- App.vue -->
<template>
  <Memo ref="memo" />
</template>

<script>
import Memo from '~/components/Memo'

export default {
  components: {
    Memo
  },
  mounted() {
    console.log(this.$refs.memo.$refs.desc); // <p>메모 내용</p>
  }
}
</script>
<!-- Memo.vue -->
<template>
  <h1>메모</h1>
  <p ref="desc">메모 내용</p>
</template>
profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.

0개의 댓글