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实体 不同步的问题，容易出现错误，以上。

以上就是今天的文章，如有问题欢迎大家的指教，谢谢大家。