ref

ref
refとは?refはreferenceの略であり、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プロパティとしてサブエレメントに参照できます.
サブ構成部品のルート要素の参照

<!-- 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>