Vue.js - DOM 요소 접근

Vue 2

• html 속성 ref 추가 (Vue에서 접근하게 위함)
• "this.$refs.ref_이름"으로 접근
• "document.querySelector("선택자")"와 동일

<template>
  <div ref="test"></div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    console.log(this.$refs.test);
    console.log(document.querySelector(".div"));
  }
}
</script>

 

Vue 3 (Composition API)

• <template>은 Vue 2와 동일
• 접근 할때 ref 이름과 동일한 변수 추가 후 사용

<template>
  <div ref="test"></div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  setup() {
    let test = ref(null);

    onMounted(() => {
      console.log(test.value);
      console.log(document.querySelector(".div"));
    });
    
    return { test }
  }
}
</script>

 

참고

• 하위 컴포넌트의 요소에 접근할 경우 "ref_이름.value.$el" 사용

<template>
  <Test ref="test"/>
</template>

<script>
import Test from './components/Test.vue'
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  components: {
    Test: Test
  },
  setup() {
    let test = ref(null);

    onMounted(() => {
      console.log(test.value.$el);
      console.log(document.querySelector(".div"));
    });
    
    return { test }
  }
}
</script>