?快速掌握vue3新語法(三) - setup中獲取元素引用(ref)

鐵皮飯盒發表於2021-11-26
Vue

在非setup鉤子中, 我們都是通過this.$refs來獲取指定元素. 但上節課我們說過setup中沒有"this", "props/emit"都是通過引數來獲取, 但是"$refs"並不存在於引數中.
​

setup中獲取元素引用比較特殊, 分2步驟:

  1. 定義一個ref變數, 值為null.
  2. 通過"return"暴露ref變數,

  3. 把變數名賦值到元素的ref屬性中.

    <!--SetupRef.vue-->
<template>
 <!-- 第3步-->
  <h1 ref="titleRef">標題</h1>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from "vue";
export default defineComponent({
  name: "SetupRef",

  setup(){
 //  第1步
 const titleRef = ref(null);
 
 onMounted(()=>{
   console.log(titleRef.value);
 });
 
 // 第2步
 return {titleRef};
  }
});
</script>

    image.png
    特別強調: 在模板中使用的是"ref"不是":ref".

    <template>
  <h1 ref="titleRef">標題</h1>
</template>

什麼時候用":ref"?

當ref的值是一個函式的時候, 我們必須用":ref", 函式只有一個引數, 那就是當前元素.

<template>
  <h1 :ref="getTitleRef">標題</h1>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from "vue";
export default defineComponent({
  name: "SetupRef",

  setup(){
    function getTitleRef(el:HTMLElement){
      console.log(el);
    }
    return {getTitleRef}
  }
});
</script>

結果同不帶":"的"ref"
image.png

在"v-for"中獲取多個ref

獲取"單個元素(或者元件)的引用"用"ref"即可, 但是如果需要獲取迴圈中的引用, 那麼就只能使用":ref".
同樣需要3個步驟:

  1. 定義函式, 函式需要一個引數, 代表當前元素. 這個函式會被v-for迴圈多次, 每次迴圈函式都可以獲取到當前元素.
  2. 在setup的返回值中返回函式.

  3. 在模板中通過":ref"指定函式.

    <template>
  <!-- 第3步, 使用:ref-->
  <h1 v-for="n in 3" :key="n" :ref="getTitleRefs">標題{{ n }}</h1>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "SetupRefVFor",

  setup() {
 //  第1步, 定義函式
 function getTitleRefs(el: HTMLElement) {
   console.log(el);
 }

 // 第2步, 返回函式
 return { getTitleRefs };
  },
});
</script>

    image.png

微信群

感謝大家的閱讀, 如有疑問可以加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由群成員拉入)

未完待續

更新動態請關注我的語雀

相關文章