ref
는 reference
의 약자로, vue에서 간략히 DOM(Document Object Model)
에 접근하게 해주는 속성이다.
DOM에 접근하는 것이기 때문에
mounted()
라이프 사이클에서 접근해야 한다.
<!-- 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 속성으로 최상위 요소를 참조할 수 있다.
<!-- 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>
<!-- 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>