ref回调形式的模版引用

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>