12、Vue 3 （2024 版）基础笔记 - 模板引用获取 DOM 元素

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute。

准备工作

1、创建组件

src/components/RefDemo.vue

<script setup lang="ts"></script>

<template></template>

2、引用组件

src/App.vue

<template>
    <RefDemo/>
</template>

<script setup lang="ts">
    import RefDemo from "@/components/RefDemo.vue";
</script>

访问模板引用

src/components/RefDemo.vue

<template>
    <p ref="nameRef">{{ name }}</p>
    <button @click="clickHandler">获取模板引用</button>
</template>

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

    // 创建响应式变量
    const name = ref('王美丽')
    // 此处，创建响应式数据用接收模板引用
    const nameRef = ref('')

    const clickHandler = () => {
        // 输出元素
        console.log(nameRef.value)
        // 通过 DOM 修改元素的值
        nameRef.value.innerHTML = '王丽丽'
    }
</script>

v-for 中的模板引用

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

src/components/RefDemo.vue

<template>
    <ul>
        <li v-for="item in list" ref="itemRefs">
            {{ item }}
        </li>
    </ul>

    <button @click="clickHandler">获取</button>
</template>

<script setup>
    import { ref } from 'vue'

    const list = ref([1, 2, 3])

    const itemRefs = ref([])

    const clickHandler = () => {
        itemRefs.value.map(i => {
            console.log(i.textContent)
        })
    }
</script>