Vue2 +复合API -动态模板参考

Question

我正在使用类星体(Quasar .dev)与Vue2 + Composition API，我试图访问具有动态生成的'v-bind:ref'属性的DOM元素，遵循这个页面的Vue3文档:

https://v3.vuejs.org/guide/composition-api-template-refs.html usage-inside-v-for

这是问题的codesandbox简化表示:https://codesandbox.io/s/suspicious -松- 90 qgd?file=/src/components/myoutercomponent.ts

组件模板(MyOuterComponent.vue):

<template>
<div>
<my-component
v-for="(item, i) in list"
v-bind:ref="
(el) => {
if (el) divs[i] = el
}
"
v-bind:key="i"
>
{{ item }}
</my-component>
</div>
</template>
<script src='./MyOuterComponent.ts' />

和该组件的脚本:

import MyComponent from './MyComponent.vue'
import TMyComponent from './MyComponent'
import {
defineComponent,
onMounted,
ref,
reactive,
onBeforeUpdate
} from '@vue/composition-api'
export default defineComponent({
name: 'MyOuterComponent',
components: { MyComponent },
props: {},
setup(props, context) {
const list = reactive([1, 2, 3, 4, 5])
const divs = ref<InstanceType<typeof TMyComponent>[]>([])
// make sure to reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
onMounted(() => {
context.root.$nextTick(() => {
console.log('THE COMPONENTs', divs, context.root.$refs)
divs.value.forEach((div) => {
console.log('My Div Ref: ', div)
})
})
})
return {
list,
divs
}
}
})

正如在文档中所看到的，我希望divs填充我动态生成的组件的模板参考，这就是我模板中的这一行应该做的:

v-bind:ref="(el) => { if (el) divs[i] = el }"

divs即使在nextTick之后记录也保持空。我希望在那里看到5个引用DOM元素的项。

如果我把模板改成:

<template>
<div>
<my-component
v-for="(item, i) in list"
v-bind:ref="item"
v-bind:key="i"
>
{{ item }}
</my-component>
</div>
</template>
<script src='./MyOuterComponent.ts' />

我在context.refs中看到refs，但我被告知此属性将在Vue3中删除;-(

)谁能告诉我我哪里错了?谢谢。

Answer 1

看起来vue-composition-api (vue - e2)不支持:ref语法。看看https://github.com/vuejs/composition-api#limitations

一个警告应该是非常有用的。

Answer 2

首先需要导入ref:

import { ref } from "@vue/composition-api"

一个简单的方法是在列表中添加一个ref。您可以使用列表索引引用所需的ref。

<template>
<div>
<my-component
ref="mycomponentRef"
v-for="(item, index) in list"
v-bind:key="index"
>
{{ item }}
</my-component>
</div>
</template>
<script>
export defineComponent({
setup() {
// this is an array, [ref0, ref1, ...]
const mycomponentRef = ref()
return { mycomponentRef }
}
})
</script>

Answer 3

虽然目前不支持，但您仍然可以使用旧的$refs作为解决方案。这不是在Vue3，但你会一直等到它实现。

<div v-for='i of 10' :key='i' ref='myRefs' />

setup(props, {refs}){
// Workaround until Vue2 Composition API supports dynamic template refs.
onMounted(()=>{
myRefs = refs.myRefs // array of 10 refs
})
}