Vue 3 Skrip Tetapan Skrip |. Secara tersirat memasukkan parameter "el" dalam rujukan templat

Question

Bolehkah sesiapa memberitahu saya mengapa skrip taip menjerit kepada saya dengan ralat berikut? error TS7006：参数“el”隐式具有“any”类型。 ref="(el) => saveRef(index, el)".我很确定 saveRef Jenis yang betul ditetapkan dalam fungsi.

<script lang="ts" setup>
    import FormComponent from '@/components/FormComponent.vue'

    const formRefs = ref<
      ComponentPublicInstance<typeof FormComponent>[]
    >([])

    function saveRef(
      index: number,
      el: ComponentPublicInstance<typeof FormComponent>
    ) {
      formRefs.value[index] = el
    }

    onBeforeUpdate(() => {
      formRefs.value = []
    })
  </script>

  <template>
    <div v-for="(component, index) in components" :key="index">
      <form-component
        :ref="(el) => saveRef(index, el)"
        :component="component"
        :index="index"
      />
   </div>
 </template>

Answer 1

Meninggalkan JS berlebihan dalam templat biasanya bukan amalan yang baik. Penyelesaian yang betul adalah untuk menentukan fungsi pengendalian rujukan yang ditaip dalam skrip komponen. Oleh kerana ia harus diparameterkan, ia boleh menjadi fungsi tertib lebih tinggi:

function saveRef(
  index: number,
) {
  return (el: ComponentPublicInstance) => {
    formRefs.value[index] = el
  }
}

dan gunakannya sebagai :ref="saveRef(index)".