vue3 ref调用v-for遍历的子组件

vue3 ref调用v-for遍历的子组件

链接: link

ref调用v-for遍历的子组件

父组件：

<template>
  <div>
	<Children
      v-for="(item, index) in list"
      :key="item.id"
      :itemData="item"
      :index="index + 1"
      :ref="(el: any) => { creatRef(el, index)}"
      @update="update"
    />
    <button onclick="submit"></button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import Children from './Children.vue';
const listRefs = ref<any>([]),
      list = ref([
      	{id: 1, name: '11'},
      	{id: 2, name: '22'},
      ]);
// 遍历生成多个ref
const creatRef = (el: any, index: number) => {
  if (el) {
    listRefs.value[index] = el;
  }
};
const update = (val: any) => {
	console.log(val);
}
const submit= () => {
	listRefs.value?.forEach((item: any) => {
	  item.todo();
	});
}
onMounted(() => {})
</script>

子组件Children：

<template>
  <div>
  	<input v-model="itemData.name" />
  </div>
</template>
<script lang="ts" setup>
import {reactive, watch} from 'vue';
const emit = defineEmits(['update']);
const props = defineProps({
  itemData: {
    type: Object,
    default: () => {},
  },
  index: {
    type: number,
    default: 0,
  },
});
const todo = () => {
	console.log('todo');
	emit('update', {
      index: props.index,
      name: itemData.name,
    });
};
defineExpose({
  todo,
});
watch(
	() => props.itemData,
	(newVal) => {
	 	console.log('newVal=', newVal);
	},
	{ deep: true, immediate: true },
);