[Vue.js] ref()를 사용하여 DOM 요소에 접근하기

<template>
  <div>
    <input type="text" v-model="message" ref="textInput" />
    <button @click="focusInput">입력란에 포커스 주기</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 입력란의 내용을 저장할 데이터
    };
  },
  methods: {
    focusInput() {
      // ref를 사용하여 입력란에 직접 접근하고 포커스를 줍니다.
      this.$refs.textInput.focus();
    }
  }
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서는 ref() 메소드를 사용하여 DOM 요소에 접근할 수 있습니다. 이를 통해 Vue 컴포넌트 내에서 특정 요소를 선택하고 조작할 수 있습니다.

위의 예제는 ref()를 사용하여 입력란에 포커스를 주는 방법을 보여줍니다. <input> 요소에 v-model을 사용하여 양방향 데이터 바인딩을 설정하고, <button> 요소를 클릭하면 focusInput 메소드가 호출되어 입력란에 포커스를 주도록 구현되어 있습니다.

this.$refs.textInput을 통해 textInput이라는 ref를 가진 DOM 요소에 접근하고, focus() 메소드를 호출하여 입력란에 포커스를 주게 됩니다. 이를 통해 Vue 컴포넌트 내에서 DOM 요소를 직접 조작할 수 있습니다.