模板引用 ref

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

访问模板引用#

为了通过组合式 API 获得该模板引用，我们需要声明一个同名的 ref：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script setup> import { ref, onMounted } from 'vue'   // 声明一个 ref 来存放该元素的引用 // 必须和模板里的 ref 同名 const input = ref(null)   onMounted(() => {   input.value.focus() }) </script>   <template>   <input ref="input" /> </template>

v-for 中的模板引用

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script setup> import { ref, onMounted } from 'vue'   const list = ref([   /* ... */ ])   const itemRefs = ref([])   onMounted(() => console.log(itemRefs.value)) </script>   <template>   <ul>     <li v-for="item in list" ref="itemRefs">       {{ item }}     </li>   </ul> </template>