vue3中ref的作用

vue中的ref其實功能很強大，下面介紹一下如何使用

ref 被用來給DOM元素或子組件注冊引用信息。引用信息會根據父組件的 $refs 對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實例

注意：只要想要在Vue中直接操作DOM元素，就必須用ref屬性進行注冊

基本用法，本頁面獲取dom元素

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">獲取test節點</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

 

 

 

 

 

這里為了在create的時候引用DOM元素，先在DOM中使用ref標簽進行了注冊，然后便可以通過’this.$refs’再跟注冊時的名稱來引用DOM元素了