无法使用v-for获取动态添加的组件的id

<template>
  <div>
    <component v-for="item in components" :key="item.id" :is="item.type" :ref="`component-${item.id}`"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: [
        { id: 1, type: 'MyComponent' },
        { id: 2, type: 'AnotherComponent' },
        // ...
      ]
    };
  },
  mounted() {
    // 访问动态组件的实例
    const component1 = this.$refs['component-1'];
    const component2 = this.$refs['component-2'];
    // ...
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <component v-for="item in components" :key="item.id" :is="item.type" @getId="handleGetId"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: [
        { id: 1, type: 'MyComponent' },
        { id: 2, type: 'AnotherComponent' },
        // ...
      ]
    };
  },
  methods: {
    handleGetId(id) {
      // 处理子组件传递的id
      console.log(id);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 触发事件并传递id
    this.$emit('getId', this.id);
  }
};
</script>