vue循环多个子组件，如何调用子组件内的方法

在Vue.js中，如果你需要在一个父组件模板内循环渲染多个相同的子组件，并想在其中触发每个子组件内部的方法，你可以通过`v-for`指令结合`:ref`属性来实现这一点。首先，在子组件里定义一个方法并给它一个唯一的引用名称，比如`clickMe`：

<!-- 子组件 template -->
<template>
  <button @click="parentClick">点击我</button>
</template>

<script>
export default {
  methods: {
    parentClick() {
      this.$emit('childMethod', '这是从子组件来的消息'); // 触发父组件指定的方法
    }
  }
}
</script>

然后，在父组件中，使用`v-for`遍历并创建子组件实例，同时为其设置一个`ref`，并在循环结束后，可以使用这个`ref`来引用每一个子组件实例，进而调用它们的方法：

<template>
  <div v-for="(child, index) in children" :key="index">
    <child-component :ref="`child-${index}`"></child-component>
  </div>

  <!-- 父组件中调用子组件方法 -->
  <button @click="callChildMethod(index)">调用第{{index}}个子组件的方法</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      children: [] // 这里假设children是一个数组，包含你想渲染的子组件实例
    };
  },
  methods: {
    callChildMethod(index) {
      this.$refs[`child-${index}`].parentClick(); // 使用$refs调用对应索引的子组件方法
    }
  }
};
</script>

这样当你点击“调用第X个子组件的方法”按钮时，对应的子组件就会执行其`parentClick`方法。