🚀快速掌握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人后必须由群成员拉入)

未完待续

更新动态请关注我的语雀