从父组件调用子组件方法

Question

当我的父组件中触发事件时，我想在我的子组件中调用一个方法，我已经做了研究，这似乎是在脚本设置中执行此操作的共识方法：

//父组件

<template>
     <tr @click="gameStats" title="Click for Game Stats">
      // Markup
      <nflGameStats
            ref="childGetStats"
        />
</template>

<script setup>
import nflGameStats from "./nfl-game-stats.vue";

const childGetStats = ref(null);
function gameStats() {
    console.log("In gameStats.");
    childGetStats.value.getStats();
}
</script>

子组件（nfl-game-stats.vue）：

<script setup>
import { defineExpose } from "vue";

const getStats = () => {
    // Do stuff
};

defineExpose({ getStats });

</script>

控制台记录错误 - “未捕获类型错误：childGetStats.value.getStats 不是函数”

我读过几篇文章都说这应该有效。非常感谢任何帮助。

Answer 1

是的，谢谢您的回复。后来我才意识到

 <nflGameStats ref="childGetStats" />

被包裹在 v-for 中，所以我有一个函数数组，并且必须使用正确的数组索引来调用该函数

<tr @click=" childGetStats[totalCount].getStats(
    gameInfo.game.id)"                                           title="Click for Game Stats">