v-for循环渲染组件时调用指定子组件方法报错的问题咨询

问题出在这几个地方：

• 模板里的ref绑定写法错误，动态ref必须用:ref（v-bind语法），直接写ref="chart${index}"会把整个模板字符串当成固定的ref名称，无法解析出chart1、chart2这类动态命名。
• 访问$refs时多了一个多余的点，this.$refs.[chart${index}]是语法错误，正确写法为this.$refs[chart${index}]。

修正后的代码 #

模板部分 #

将ref改为动态绑定：

<BaseChart 
  :ref="`chart${index}`" 
  @click="pauseChart(index)" 
  v-for="index in 6" 
  :key="index"
/>

方法部分 #

修正$refs的访问方式，同时添加存在性判断避免报错：

pauseChart(index) {
  const targetChart = this.$refs[`chart${index}`];
  if (targetChart && targetChart.pauseChart) {
    targetChart.pauseChart();
  }
}

更省心的替代写法（无需手动拼接ref名称） #

可以直接在循环中收集组件实例，点击时直接传递实例调用方法，省去ref命名和查找的步骤：

模板部分 #

<BaseChart 
  @click="pauseChart(chart)" 
  v-for="(item, index) in 6" 
  :key="index"
  :ref="instance => charts[index] = instance"
/>

脚本部分 #

data() {
  return {
    charts: [] // 存储所有图表组件实例
  }
},
methods: {
  pauseChart(chart) {
    chart?.pauseChart();
  }
}

额外注意：确保BaseChart组件内部确实在methods中定义了pauseChart方法，且该方法是暴露在组件实例上的（不是私有函数）。

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