引言
在 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>
代码解释
- 定义
inputRefs
:借助ref
创建一个空数组inputRefs
,用来存储每个输入框的ref
。 - 动态添加输入框 :点击"添加输入框"按钮时,调用
addInput
方法,向inputRefs
数组添加一个null
值。 - 绑定
ref
:在v-for
循环里,使用:ref="el => inputRefs[index] = el"
动态地将每个输入框的ref
存储到inputRefs
数组中。 - 聚焦最后一个输入框 :点击"聚焦最后一个输入框"按钮时,调用
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>
代码解释
- 定义
componentRefs
:使用ref
创建一个空数组componentRefs
,用于存储每个组件的ref
。 - 动态添加组件 :点击"添加组件"按钮时,调用
addComponent
方法,向componentRefs
数组添加一个null
值。 - 绑定
ref
:在v-for
循环中,使用:ref="el => componentRefs[index] = el"
动态地将每个组件的ref
存储到componentRefs
数组中。 - 调用最后一个组件的方法 :点击"调用最后一个组件的方法"按钮时,调用
callMethodOnLastComponent
方法,获取最后一个组件的ref
并调用其myMethod
方法。
总结
动态 ref
在 Vue 3 里是一个强大的特性,它能让你动态地创建和管理多个元素或者组件的 ref
。通过数组或者对象来存储这些 ref
,你可以方便地访问和操作它们。在实际开发中,动态 ref
可用于实现各种复杂的交互效果。