模版引用

ref 用于注册元素或子组件的引用

在组合式 API 中，引用将存储在与名字一样的 ref 里

<template><p ref="myDom">hellop>
template><script lang="ts" setup>
import { ref, onMounted } from 'vue';const myDom = ref();
onMounted(() => {console.log('myDom', myDom.value);
});
script>

如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例

必须等组件挂载后才能访问到 ref 注册的引用

如果需要侦听一个 ref 的变化，确保考虑到其值为 undefined 的情况：

// 使用 watchEffect 监听值的变化
watchEffect(() => {if (input.value) {input.value.focus();} else {// 此时还未挂载, 或此元素已经被卸载 (例如通过 v-if 控制)}
});

<template><inputtype="text"ref="input"v-if="isShowed"/><button @click="showInput">showInputbutton>
template><script setup lang="ts">
import { ref, nextTick } from 'vue';const input = ref();
const isShowed = ref(false);
const showInput = () => {isShowed.value = true;nextTick(() => { // 使用 nextTickinput.value.focus(); // 确保 input 已被挂载再执行 focus()});
};
script>

v-for 中的模板引用

当在 v-for 中使用模板引用时，对应的 ref 值为一个数组，它将在元素被挂在后包含对应整个列表的所有元素

<template><ul><liv-for="item in list"ref="itemRefs">{{ item }}li>ul>
template><script setup lang="ts">
import { ref, onMounted } from 'vue';const list = ref([1, 2, 3]);const itemRefs = ref([]);
onMounted(() => console.log(itemRefs.value));
script>

注意：ref 数组的顺序不保证与源数组的顺序一致

函数模板引用

• ref attribute 可以绑定一个函数，该函数会在每次组件更新时被调用
• 该函数会收到元素引用作为其第 1 参数

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

• 注意：这里需要使用动态的 :ref 绑定才能传入一个函数
• 当绑定的元素被卸载时，函数也会被调用一次，此时函数的第 1 参数 el 为 null

组件上的 ref

模板引用也可以被用在子组件上，此时引用为组件实例

注意：使用了