Vue.js中如何通过ref在父组件调用多个子组件的函数

我在Vue.js中尝试通过ref调用每个子组件内的函数，但运行后无任何效果。每个子组件基于API数据渲染，调用updateUserDataDB函数时会获取该API数据、上传至Firestore并修改自身变量。目前只能通过每个子组件的按钮触发操作，我希望在父组件设置按钮批量触发所有子组件的该函数。参考相关文章未解决问题，怀疑与子组件使用类似ref有关，寻求帮助及建议。

App.vue (父组件) #

<template>
  <body>
    <button class="btn-right" @click="updateUserDataDB"> Update all PlayerBoxes</button>
    <p v-for="country in countries" :key="country" >
      <!-- 修正props绑定的语法错误：补全players属性的闭合引号 -->
      <PlayerBox :players="country" :ref="'refresh_db' + country"/>
    </p>
  </body>
</template>

<script>
import { query, collection, getDocs, orderBy, setDoc, doc } from "firebase/firestore"
import db from './firebase/init.js'
import PlayerBox from './components/PlayerBox.vue'
import{ref} from "vue"

export default {
  name: 'App',
  components: { PlayerBox},
  data() {
    return {
      players: [],
      countries: [] // 注意：需确保该数组已正确初始化并赋值
    }
  },
  created() {
    this.getPlayerFirestore()
  },
  methods: {
    updateUserDataDB(){
      console.log("clicked")
      // 原代码错误：不存在refresh_db这个统一ref，需遍历所有动态生成的子组件ref
      Object.values(this.$refs).forEach(child => {
        // 检查方法存在性，避免报错
        if (typeof child.updateUserDataDB === 'function') {
          child.updateUserDataDB()
        }
      })
    },
    async getPlayerFirestore() {
      const q = query(collection(db, 'users'), orderBy('elo', 'desc'));
      const querySnap = await getDocs(q);
      querySnap.forEach((doc) => {
        this.players.push(doc.data())             
      })
    }
  }
}
</script>

PlayerBox.vue (子组件) #

<template>
  <!-- 子组件模板内容 -->
</template>

<script> <!-- 修正标签拼写错误：<script>而非<cript> -->
import { getDoc, updateDoc , doc} from "firebase/firestore"
import db from '../firebase/init.js'
import {ref} from "vue";

export default {
  props: ["players"],
  data(){
    return {
      // 子组件自身变量定义
    }
  },
  methods: {
    async updateChampionStats(){
      // 现有逻辑
    },
    async updateUserDataDB() {
      // 补全获取API数据、上传Firestore及修改自身变量的业务逻辑
      console.log("子组件updateUserDataDB触发")
      // 示例逻辑（根据实际需求调整）
      // const apiData = await fetchTargetData();
      // const docRef = doc(db, 'users', 目标用户ID);
      // await updateDoc(docRef, apiData);
      // this.内部变量 = 新值;
    }
  }
}
</script>

1. 父组件语法修复：

   • 补全PlayerBox组件players属性的闭合引号，解决模板解析失败问题；
   • 确保countries数组已正确初始化并赋值，否则v-for不会渲染子组件。

2. 批量调用逻辑修正：

   • 由于每个子组件的ref是动态拼接的唯一值，无法通过this.$refs.refresh_db直接获取，需遍历this.$refs所有值，逐个调用子组件方法；
   • 添加方法存在性检查，避免因非目标组件混入导致报错。

3. 子组件代码修复：

   • 修正<cript>的拼写错误，确保组件正常加载；
   • 补全updateUserDataDB方法的业务逻辑，否则调用后无实际效果。

内容的提问来源于stack exchange，提问作者Sumsar