Hi Dai Gei Ho~ 我是Winnie～

突然想來說說：
其實這篇應該要與上篇的 資料定義 ref 一起的，會拉出成為一篇的主要原因是因為當時自己對Vue不熟的關係，對於 ref的 模版引入 跟 資料定義的用法 一直搞混 ，算是我痛了很久的一個地方，因此希望大家不要像我一樣那麼痛，有痛就好的期望，所以就拉出來寫成一篇了XD，（畢竟梁文音是這樣唱的：寫(哭)過就好了～痛都會走的 想聽指路-> 哭過就好了...）

回到正題～ 所以 今天文章的內容要來說的是 如何使用 Composition API 中的 ref 來取得 模板(template)中的 Dom元素的資料 (如: 位置、寬高)。

一樣我們先來看看 過去 Option API是如何取得的吧。

Option API 中 的 this.$ref

<template>

 <input ref="inputDom"/>
 
<template/>

<script>
export default{
 name: 'input-item',
  methods: {
    focusInput() {
      console.log(this.$refs.inputDom) 
    }
  },
    mounted() {
    this.focusInput()
  }
  
}

</script>

從上程式碼中，我們可以看到之前 我們要在函式中來 取得模板時，需在模板上綁定 一個 ref 值，接著將元素註冊在 $refs物件實體內，透過 this.$refs.xxx來取得 Dom元素 ，使用其Dom元素的相關資訊。

Composition API 中的 模板引用

到了 Vue3 Composition API 中，雖然沒有了$refs，但因為 響應式的引用 與 模板引用 的概念是相同的，所以我們可以 透過宣告一個 ref(null) 來 回傳給 模板(template)進行綁定 。

用法如下：

<template>

 <input ref="inputDom"/>
 
<template/>

<script>
import { ref, onMounted } form 'vue'
export default{
    setup(){
        const inputDom = ref(null); //變數需與模板ref的 名稱一樣
        onMounted(()=>{
        //DOM元素將在初始渲染之後分配給ref
         console.log(inputDom.value)
        })
        
     return{ inputDom }
    }
}
</script>

如果是針對 v-for所渲染的多個動態元素 我們要如何抓到各個Dom元素呢？

首先，我們可以先宣告一個 ref包裝的陣列 ref([])回傳給 模板使用, 同時 模板這邊 透過 v-bind:ref來綁定 function 每一個Dom元素，

範例如下：

<template>

<div v-for ="(num,i) in nums "
     :ref="(el)=>{ divs[i] = el }">{{num}}</div>

<template/>

<script>
import { ref, reactive} form 'vue'
export default{
   setup(){
       const nums = reactive([1,2,3])
       const divs = ref([]); 

    return{ nums,divs }
   }
}
</script>

如同上面一樣，我們就可以透過 divs[x] 取得對應的Dom節點了(自行帶入對應index)

       onBeforeUpdate(()=>{
         divs.value =[] 
       })

其中需要注意的地方，因為Dom節點是動態產生的，有可能因為 nums 內容順序更動而改變，所以在每次更動前我們需要在 onBeforeUpdate重置一下，確保拿到的元素是正確的。

提醒注意:

雖然我們可以透過 vue 來取得 元件的Dom元素資訊，但直接透過其來操作 DOM元素的內容是萬萬不可的啊，因為這樣可能會造成 Vue實體 不同步的問題，容易出現錯誤，以上。

以上就是今天的文章，如有問題歡迎大家的指教，謝謝大家。