v-for调用子组件暴露给父组件的方法

子组件通过暴露方法给到父组件调用

function checkAllRated() {
  const isChecked = props.modelValue.every(item => item.rate)
  if (!isChecked)
    ElMessage.warning('请先填写所有评分')
  return isChecked
}
defineExpose({ checkAllRated })

父组件通过ref调用子组件的方法，这里需要进行唯一的ref注册，如果不唯一就无法获取到对应的ref去调用，因为v-for生成的ref是一个数组

<div v-for="item, index in list" :key="item.id" class="chat-message" :class="[{ 'chat-message-me': item.isMe }]" >
    <Rate :ref="(el: RateComponent) => rateRefs[index] = el" v-model:modelValue="item.params" :is-rate="item.isSubmit" />
</div>

调用方法

function handleSubmit(item: ListItem, index: number) {
  const isChecked = rateRefs.value[index].checkAllRated()
  if (!isChecked)
    return
  item.isSubmit = true
}