Frontend/└vue3

vue3 ref

SOLYI 2021. 10. 19. 16:21
반응형

 

//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>
반응형

'Frontend > └vue3' 카테고리의 다른 글

[vue3] component api 적용/미적용 예제  (0) 2021.10.19
[vue3] composition api  (0) 2021.10.19
vue3 provide, inject  (0) 2021.10.19
vue3 slot  (0) 2021.10.19
vue3 component emit  (0) 2021.10.19