iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 17

Day_17 : 讓 Vite 來開啟你的Vue 之 取得 模板元素 ref

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實體 不同步的問題,容易出現錯誤,以上。

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


上一篇
Day_16 : 讓 Vite 來開啟你的Vue 之 資料定義 ref 與 reactive
下一篇
Day_18 : 讓 Vite 來開啟你的Vue 之 toRef & toRefs
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言