模版引用

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

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

<template>
    <p ref="myDom">hello</p>
</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>
    <input
        type="text"
        ref="input"
        v-if="isShowed"
    />
    <button @click="showInput">showInput</button>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';

const input = ref();
const isShowed = ref(false);
const showInput = () => {
    isShowed.value = true;
    nextTick(() => { // 使用 nextTick
        input.value.focus(); // 确保 input 已被挂载再执行 focus()
    });
};
</script>

v-for 中的模板引用

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

<template>
    <ul>
        <li
            v-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

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

注意使用了 <script setup> 的组件是默认私有的父组件无法访问到使用了 <script setup> 的子组件的任何东西除非子组件中设置了 defineExpose 宏显示暴露

<template>
    {{ name }}
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('superman');

defineExpose({ name }); // 暴露数据
</script>

<template>
    <HelloWorld ref="helloWorld" />
</template>

<script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';
import { ref, onMounted } from 'vue';

const helloWorld = ref();
onMounted(() => {
    console.log('helloWorld 暴露出来的 name:', helloWorld.value.name);
});
</script>