vue3 ref

 

//App.vue
<template>
  <!-- <h1 id="hello"> -->
  <!-- <h1 ref="hello">
    hello world!
  </h1> -->

  <Hello ref="hello" />
</template>

<script>
import Hello from '~/components/Hello'
export default {
  components:{
    Hello
  },
  mounted(){    //created 는 안되고 mounted 에서만 $refs 사용가능!
    //const h1El = document.querySelector('h1')   //id 없을때

    // const h1El = document.querySelector('#hello') //id 붙였을때
    // console.log(h1El.textContent)

//    console.log(this.$refs.hello.$el) 
    console.log(this.$refs.hello.$refs)         //Proxy 오브젝트
    console.log(this.$refs.hello.$refs.good)    //<h1>태그
  },
}
</script>

<template>
  <h1>Hello~~~~~.vue~~</h1>
  <h1 ref="good">
    Good!!!
  </h1>
</template>