关于javascript:🚀快速掌握vue3新语法三-setup中获取元素引用ref

在非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>
   

   
   特别强调: 在模板中应用的是”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”

在”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>

微信群

感激大家的浏览, 如有疑难能够加我微信, 我拉你进入微信群(因为腾讯对微信群的100人限度, 超过100人后必须由群成员拉入)

未完待续

更新动静请关注我的语雀