首先,我们知道为单个输入框分配ref属性,只需要用以下方法即可:
const inputRef = ref();
<a-input ref="inputRef "/>
- 但是对于想使用v-for循环遍历赋值给到对应的item组件的ref属性的话。
- 不能直接就是**:ref=“item.xxxRef”**!!!
- 这样无法正确将DOM元素绑定到item.toRef属性。 而是需要使用箭头函数的写法。
- 详情看下方的例子:
//e.g
let flightInfo = reactive<any[]>([
{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
},{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
},{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
}
])
<template>
<div>
<div v-for="(item, index) in flightInfo" :key="index">
<input type="text" v-model="item.toAirport" :ref="ref => item.toRef = ref" />
</div>
</div>
</template>
:ref=“ref => item.toRef = ref” ==>这样每个输入框的toRef属性都会正确地指向对应的DOM元素;
- 因为在Vue模板中,:ref指令绑定的值需要是一个函数或一个响应式对象。
- 这是因为Vue需要在组件渲染时执行绑定的函数或更新绑定的对象。
当你使用:ref="item.toRef"时,item.toRef将被视为普通的表达式,而不是一个函数或响应式对象。这样会导致Vue无法正确地处理ref绑定,从而无法将DOM元素分配给item.toRef。 - 为了正确地绑定ref,我们需要将其设置为一个函数,函数的参数是DOM元素的引用。在函数内部,我们可以将DOM元素引用赋值给item.toRef,以便在组件中使用。
- 因此,我们使用:ref="ref => item.toRef = ref"这种写法,其中箭头函数接收ref作为参数,并将其赋值给item.toRef。
- 这样,当组件渲染时,Vue会执行这个函数,并在DOM元素准备就绪时将其引用分配给item.toRef。
总结起来,:ref需要一个函数或响应式对象来正确绑定DOM元素的引用。通过将箭头函数设置为:ref的值,我们可以在函数内部执行赋值操作,将DOM元素的引用分配给item.toRef。