Vue 3 动态 ref 的使用方式

引言

在 Vue 3 里,ref 是一个极为重要的特性,它可用于获取 DOM 元素或者组件实例。通常,我们会静态地定义 ref,不过在某些情形下,需要动态地创建和管理 ref。本文将深入探讨在 Vue 3 里动态 ref 的使用方式。

静态 ref 回顾

在探讨动态 ref 之前,先回顾一下静态 ref 的使用。以下是一个简单示例:

vue 复制代码
<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

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

const myInput = ref(null);

const focusInput = () => {
  myInput.value.focus();
};
</script>

在这个例子中,myInput 是一个静态的 ref,它关联到了 <input> 元素。借助 myInput.value 就能访问该 DOM 元素。

动态 ref 的使用场景

动态 ref 常用于需要动态生成多个元素或者组件,并且要分别管理它们的情况。例如,渲染一个列表,每个列表项都有自己的 ref

动态 ref 的实现

示例 1:动态生成输入框并管理 ref

vue 复制代码
<template>
  <div>
    <button @click="addInput">添加输入框</button>
    <div v-for="(inputRef, index) in inputRefs" :key="index">
      <input :ref="el => inputRefs[index] = el" type="text" />
    </div>
    <button @click="focusLastInput">聚焦最后一个输入框</button>
  </div>
</template>

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

const inputRefs = ref([]);

const addInput = () => {
  inputRefs.value.push(null);
};

const focusLastInput = () => {
  const lastIndex = inputRefs.value.length - 1;
  if (lastIndex >= 0) {
    inputRefs.value[lastIndex].focus();
  }
};
</script>
代码解释
  1. 定义 inputRefs :借助 ref 创建一个空数组 inputRefs,用来存储每个输入框的 ref
  2. 动态添加输入框 :点击"添加输入框"按钮时,调用 addInput 方法,向 inputRefs 数组添加一个 null 值。
  3. 绑定 ref :在 v-for 循环里,使用 :ref="el => inputRefs[index] = el" 动态地将每个输入框的 ref 存储到 inputRefs 数组中。
  4. 聚焦最后一个输入框 :点击"聚焦最后一个输入框"按钮时,调用 focusLastInput 方法,获取最后一个输入框的 ref 并调用 focus 方法。

示例 2:动态组件与动态 ref

vue 复制代码
<template>
  <div>
    <button @click="addComponent">添加组件</button>
    <component
      v-for="(componentRef, index) in componentRefs"
      :key="index"
      :is="MyComponent"
      :ref="el => componentRefs[index] = el"
    />
    <button @click="callMethodOnLastComponent">调用最后一个组件的方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

const componentRefs = ref([]);

const addComponent = () => {
  componentRefs.value.push(null);
};

const callMethodOnLastComponent = () => {
  const lastIndex = componentRefs.value.length - 1;
  if (lastIndex >= 0) {
    componentRefs.value[lastIndex].myMethod();
  }
};
</script>
代码解释
  1. 定义 componentRefs :使用 ref 创建一个空数组 componentRefs,用于存储每个组件的 ref
  2. 动态添加组件 :点击"添加组件"按钮时,调用 addComponent 方法,向 componentRefs 数组添加一个 null 值。
  3. 绑定 ref :在 v-for 循环中,使用 :ref="el => componentRefs[index] = el" 动态地将每个组件的 ref 存储到 componentRefs 数组中。
  4. 调用最后一个组件的方法 :点击"调用最后一个组件的方法"按钮时,调用 callMethodOnLastComponent 方法,获取最后一个组件的 ref 并调用其 myMethod 方法。

总结

动态 ref 在 Vue 3 里是一个强大的特性,它能让你动态地创建和管理多个元素或者组件的 ref。通过数组或者对象来存储这些 ref,你可以方便地访问和操作它们。在实际开发中,动态 ref 可用于实现各种复杂的交互效果。

相关推荐
SYKMI15 分钟前
@JsonFormat时区问题
java·前端·数据库
海盐泡泡龟2 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder4 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder4 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars4 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾5 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
苹果酱05675 小时前
Java设计模式:探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
Oscar_02086 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡6 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder6 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3