[Vue] 요소나 컴포넌트를 참조할 수 있는 refs 사용법

refs

특정한 요소나 컴포넌트를 등록한 이름으로 참조하는데 사용하는 속성

 

1. 요소 참조하기

h1 요소에 ref를 hello라는 이름으로 등록해주었다. h1요소는 등록한 ref로 참조할 수 있게 된다. 참조한 요소는 HTML 구조에 연결이 된 이후에 엑세스 할 수 있으므로 mounted 라이프사이클 안에서만 등록한 요소를 ref로 찾을 수 있다. 해당 요소를 참조할때는 this.$refs.이름으로 찾아준다.

<!-- App.vue -->
<template>
  <h1 ref="hello">Hello World</h1>
</template>

<script>
export default {
  // created: 컴포넌트가 생성된 직후에 실행
  created() {
    console.log('요소: ', this.$refs.hello); // undefined
  },
  // mounted: HTML 구조에 연결이 된 직후에 실행
  mounted() {
    console.log('요소: ', this.$refs.hello); // <h1>Hello World</h1>
  },
};
</script>

 

2. 컴포넌트 참조하기

요소를 참조한 것과 마찬가지로 참조하고 싶은 컴포넌트에 ref="이름"을 등록해준다. ref를 등록해주면 컴포넌트의 가장 최상위 요소를 참조해준다. 등록해준 컴포넌트의 최상위 요소는 this.$refs.컴포넌트이름.$el로 접근해준다. 

<!-- App.vue -->
<template>
  <HelloWorld ref="hello" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld,
  },
  // mounted: HTML 구조에 연결이 된 직후에 실행
  mounted() {
    console.log(this.$refs.helloworld); // Proxy 객체 출력
    console.log(this.$refs.helloworld.$el); // <h1>Hello World</h1>
  },
};
</script>

<!-- Hello World.vue -->
<template>
  <h1>Hello World</h1>
</template>

 

3. 여러개의 최상위 요소가 있는 컴포넌트 참조하기

컴포넌트에 ref를 등록해주면 컴포넌트의 최상단 요소를 참조할 수 있게 된다. 만약 컴포넌트에 최상단 요소가 여러개 있다면 컴포넌트 내에서 참조하고 싶은 요소를 지정해 ref를 등록해주어야한다. ref가 이중으로 등록되어 있으므로 접근할때도 this.$refs.컴포넌트이름.$refs.참조한요소의이름으로 해준다.

<!-- App.vue -->
<template>
  <HelloWorld ref="hello" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld,
  },
  // mounted: HTML 구조에 연결이 된 직후에 실행
  mounted() {
    console.log(this.$refs.helloworld.$refs); // Proxy 객체 출력
    console.log(this.$refs.helloworld.$refs.bye); // <h1>Bye World</h1>
  },
};
</script>

<!-- Hello World.vue -->
<template>
  <h1>Hello World</h1>
  <h1 ref="bye">Bye World</h1>
</template>