본문 바로가기
VUE.JS

[VUE.JS] 컴포넌트 ref

by mikrw 2023. 2. 10.

https://v3-docs.vuejs-korea.org/guide/essentials/template-refs.html

 

템플릿 참조 | Vue.js

 

v3-docs.vuejs-korea.org

ref

dom element에 접근할수 있는 속성

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

컴포넌트가 마운트된 후에만 ref에 접근할 수 있다

 

 

컴포넌트 ref

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child는 <Child />의 인스턴스를 가집니다.
  }
}
</script>

<template>
  <Child ref="child" />
</template>