[2023年11月30日11:41:02]
ref回调形式的模版引用
掉坑里，记录下。v-for 循环拿取 ref 模版引用两种保险方式
<template>
<a-form>
<a-form-item v-for='(f, idx) in formField' :key='idx'>
<template #label>
<label>{{ f.title }}</label>
</template>
<a-form-item>
<component :is='xxx' :ref='(el) => componentRefs.push(el)' />
</a-form-item>
</a-form-item>
</a-form>
</template>
<script lang='ts' setup>
import { ref, onMounted } from 'vue';
const componentRefs = ref<any[]>([]);
onMounted(() => {
console.log(componentRefs.value)
})
</script>
<template>
<a-form>
<a-form-item v-for='(f, idx) in formField' :key='idx'>
<template #label>
<label>{{ f.title }}</label>
</template>
<a-form-item>
<component :is='xxx' :ref='funcRef' />
</a-form-item>
</a-form-item>
</a-form>
</template>
<script lang='ts' setup>
import { ref, onMounted } from 'vue';
const componentRefs = ref<any[]>([]);
onMounted(() => {
console.log(componentRefs.value)
})
function funcRef (el) {
if(el)
componentRefs.push(el)
}
</script>