Vue.js ref 속성으로 요소와 컴포넌트에 쉽게 접근하기

ref 속성

ref 속성은 Vue 컴포넌트에서 DOM 요소나 자식 컴포넌트에 쉽게 접근하기 위한 핵심적인 기능입니다. 

 

ref 사용법

1) 요소 접근

<template>
  <div>
    <input ref="Input" type="text" />
    <button @click="Output">출력</button>
  </div>
</template>

템플릿에서 요소에 `ref` 속성을 추가하여 해당요소를 참조할 수 있습니다. 위 예제 코드에서는 `Input`으로 지정하였습니다. 당연히 참조할 때 구분이 되어야하기 때문에 `ref` 속성에 지정하는 값은 유니크해야 합니다.

 

<script>
export default {
  methods: {
    Output() {
      console.log(this.$refs.Input.value);
    }
  }
}
</script>

`this.$refs`를 사용하여 `ref`로 지정한 요소에 접근(참조)할 수 있습니다. 위 예제는 `this.$refs.Input.value`으로 `ref="Input"`인 요소에 접근하여 value 속성 값을 가져와 console에 로그를 남기는 코드입니다.

 

 

속성은 단순히 값 뿐만이 아니라 이벤트도 실행할 수 있습니다. 아래 예제는 <button> 요소에 접근하여 해당 요소의 click 이벤트를 발생시키는 코드입니다.

<button type="button" ref="close" @click="resetForm" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

this.$refs.close.click();

 

2) 자식 컴포넌트 접근

 

또한, ref 속성은 DOM 요소뿐만 아니라 `자식 컴포넌트`에도 활용할 수 있습니다.

자식 컴포넌트에 ref를 지정하면 부모 컴포넌트에서 해당 자식 컴포넌트에 접근하여 메서드를 호출하거나 데이터를 가져올 수 있습니다.

 

부모 컴포넌트

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">자식 메소드 호출</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
}
</script>

위 예제는 부모 컴포넌트에서 `ref` 속성을 사용하여 자식 컴포넌트에 접근하고, 자식 컴포넌트의 `childMethod()`를 호출하는 코드입니다.

 

자식 컴포넌트: ChildComponent.vue

<template>
  <div>
    <p>자식 컴포넌트입니다.</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('자식 메소드가 호출되었습니다.');
    }
  }
}
</script>