Refs 요소나 컴포넌트를 참조

refs 는 말 그대로 주소를 지정해서 접근할 수 있도록 해 주는 거임.

 

<template>

  <HelloWorld ref="hello"></HelloWorld>

</template>

이렇게 ref를 지정해 주고, 저게 접근할 수 있는 이름이 됨.

 

<script>

import HelloWorld from './components/HelloWorld.vue';

export default{

  components:{

    HelloWorld

  },

  mounted(){

    console.log(this.$refs.hello);

  }

}

</script>

이렇게 this.$refs.이름

해서 접근 가능함.

 

저 $refs.hello에는 굉장히 많은 정보가 담겨져 있는 객체임.

 

내부의 요소에 접근하고 싶으면

console.log(this.$refs.hello.$el);

저렇게 뭐 최상위로 Handler, Target, isRevoked 등 객체와 값들이 있음.

 

어..

그러니까, 저것의 컴포넌트? 그 자체에 대한 객체인 듯?

html요소가 아니고, 그 더 상위인 컴포넌트 객체인 듯.

 

또, 만약 저 컴포넌트 내부에 또 컴포넌트나 요소에 ref해서 주면

바깥에서도 

console.log(this.$refs.hello.$refs.inHello);

이렇게 접근할 수 있음.

HelloWorld 

안의 

<template>

  <div>

    <h1>Hello~~~</h1>

    <h2 ref="inHello">Hello~~~</h2>

  </div>

</template>

저 h2에 접근 가능.

 

컴포넌트 등도 당연히 됨. 

 

그러니까 컴포넌트에 접근하면 컴포넌트 객체가 나오고, 태그에 접근하면 태그가 나옴.