如何删除Vue中动态添加的指定组件？

你的问题根源在于用数字计数（index）控制渲染数量，这种方式只能按顺序增减，无法精准定位到要删除的特定块。要实现任意删除功能，需要把数据结构改成数组来存储每个字段块的唯一标识，通过操作数组来添加/删除对应项。

修改步骤： #

1. 重构父组件数据与逻辑

把原来的index数字改成数组，用来存储每个字段块的唯一ID；同时修改add和remove方法来操作数组：

<template>
  <div>
    <!-- 遍历fields数组，每个项对应一个字段块 -->
    <component
      :is="fieldType"
      v-for="(field, idx) in fields"
      :key="field.id"
      :id="field.id"
      :display-index="idx + 1" <!-- 传给子组件显示用的序号 -->
      @remove="remove"
    />

    <div>
      <button type="button" @click="add">Add {{ label }}</button>
    </div>
  </div>
</template>

<script>
import textField from "./textField";

export default {
  components: {
    textField,
  },

  props: {
    fieldType: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: "",
    }
  },

  data: () => ({
    fields: [], // 用数组存储每个字段块的唯一ID
  }),

  methods: {
    add() {
      // 生成唯一ID（时间戳方式简单易实现）
      this.fields.push({ id: Date.now() });
    },

    remove(targetId) {
      // 过滤掉要删除的ID对应的项
      this.fields = this.fields.filter(field => field.id !== targetId);
    },
  },
};
</script>

2. 调整子组件适配新的props

子组件不再接收index，改为接收id（用于删除定位）和display-index（用于显示序号）：

<template>
  <div>
    <label :for="'text-' + id" v-text="'Text' + displayIndex"></label>
    <input :id="'text-' + id" type="text" name="" />
    <button type="button" @click="$emit('remove', id)">
      Remove
    </button>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
    displayIndex: {
      type: Number,
      required: true,
    },
  },
};
</script>

方案说明 #

• 原方式v-for="i in index"是基于连续数字范围渲染，删除中间项后后续组件的index会自动重排，无法精准定位删除目标；
• 改用数组存储唯一ID后，每个字段块对应数组中的独立项，删除时直接过滤目标ID的项即可精准删除指定块；
• displayIndex用来保持原有的序号显示（Text1、Text2...），删除后序号会自动更新，符合用户使用习惯。

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