Vue3 入门指北（十二）模板引用

作者：Augus

2022 年 10 月 09 日
天津
本文字数：730 字
阅读完需：约 2 分钟

前言

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

<input ref="input">

复制代码

在我们日常的开发中，可能在某些情况下，我们需要直接访问 DOM 的底层元素，这个时候我们就可以通过 ref 属性来完成该操作：

<input ref="input">

复制代码

通过 ref 我们可以直接在组件实例挂载之后拿到它的引用，有些情况他可能很有用。

使用模板引用

如何我们是通过组合式 API 的方式，获取引用的话，需要声明一个同名的 ref，通过声明的 ref 来对他进行使用：

<script setup>import { ref, onMounted } from 'vue'
const input = ref(null)
onMounted(() => {  input.value.focus()})</script>
<template>  <input ref="input" /></template>

复制代码

只有在组件挂载之后，才能使用模板引用。还要注意一点的时候，因为该元素还未创建，初次渲染时为 null。所以在模板中使用的话要考虑到这种情况。

v-for 与模板引用

当我们的 v-for 与模板引用作用在一个节点时，ref 中存放的将会是一个数组

<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>

复制代码

ref 中存放的数据顺序不一定会和源数组顺序一致

函数模板引用

除了上面使用字符串作为模板引用名字外，ref 还支持动态绑定一个函数。该函数的第一个参数为元素引用。

<input :ref="(el) => { /* 可以将 el 赋值给一个ref 变量 */ }">

复制代码

当绑定的 DOM 元素被卸载时，绑定的函数也会被调用一次，不过拿到的参数值会是 null

发布于: 刚刚阅读数: 3

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

Vue3 入门指北（十二）模板引用

前言

使用模板引用

v-for 与模板引用

函数模板引用

Augus

评论