vue3父组件通过ref调用子组件的方法，子组件是通过v-for动态渲染的

 

Index.vue:

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
import './index.css'

const child = ref(null)
let arr = [1, 2, 3]

let refList = []

const handleRef = (el, index) => {
  console.log(el, index)
  el.handleGetValue()
  refList.push(el)
}

onMounted(() => {
  refList[1].handleGetValue()
})
</script>

<template>
  <div class="m-home-wrap">
    <Child v-for="item in arr" :key="item" :ref="(el) => handleRef(el, item)"></Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

<template>
  <div>child</div>
</template>

<script lang="ts" setup>
import { defineExpose } from 'vue'
const handleGetValue = () => {
  console.log('子组件的方法')
}

defineExpose({
  handleGetValue
})
</script>

<style></style>

人工智能学习网站

https://chat.xutongbao.top