Vue 模板引用 ref 用法

1. 简介

在 Vue 中，我们可以使用特殊的 ref attribute 直接访问底层 DOM 元素。

<template>
    <input ref="input" />
</template>

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

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

2.  在 v-bind 中使用

如果使用 v-bind，ref 值为对应的 ref 变量，而不是字符串：

<template>
    <input v-bind="props" />
</template>

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

const input = ref(null)

const props = {
    ref: input // 注意此处是变量，不是字符串 "input"
}

onMounted(() => {
  input.value.focus()
})
</script>

3.  在 h() 中使用

如果使用 h()，ref 值为对应的 ref 字符串，而不是变量：

<script>
import { h, ref, onMounted } from 'vue'

export default {
    setup() {
        const input = ref(null)

        onMounted(() => {
          input.value.focus()
        })

        return {
            input
        }
    },
    render() {
        return h("input", { ref: "input" // 注意此处是字符串 "input"，不是变量 });
    }
}
</script>

4. 数组

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

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

5. 函数

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