Vue组件传值至Bootstrap模态框异常及优化方案咨询

你遇到的问题核心是DOM id冲突：每个TaskItem都渲染了一个TaskForm，而所有模态框的id都是formModal。HTML中id是全局唯一的，Bootstrap的data-bs-target="#formModal"只会匹配DOM中第一个该id的元素，因此无论点击哪个编辑按钮，打开的都是第一个TaskForm的模态框，自然显示第一个任务的数据。

同时，这种每个列表项对应一个模态框的实现方式存在冗余，浪费DOM资源，也不符合组件复用和数据流清晰的原则。

推荐采用单一模态框+父组件控制编辑状态的方案，整个页面只保留一个TaskForm，通过响应式变量绑定当前编辑的任务，从根源解决id冲突问题，同时让数据流更清晰。

1. 重构TaskForm组件 #

移除固定id，改用Bootstrap的JS API控制模态框显示/隐藏，同时支持接收父组件传递的任务数据，提供保存回调：

<template>
  <div class="modal fade" ref="modalRef" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">{{ currentTask?.name || '编辑任务' }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 示例：任务名称输入框 -->
          <input v-model="currentTask.name" class="form-control" placeholder="输入任务名称" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="handleSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { Modal } from 'bootstrap';

const props = defineProps({
  task: Object
});
const emit = defineEmits(['save']);

const modalRef = ref(null);
let modalInstance = null;

// 深拷贝任务数据，避免直接修改原数据
const currentTask = computed(() => props.task ? { ...props.task } : null);

// 初始化模态框实例
onMounted(() => {
  modalInstance = new Modal(modalRef.value);
});

// 监听任务变化，自动打开模态框
watch(() => props.task, (newTask) => {
  if (newTask && modalInstance) {
    modalInstance.show();
  }
});

// 保存逻辑，触发父组件回调
const handleSave = () => {
  if (currentTask.value) {
    emit('save', currentTask.value);
    modalInstance.hide();
  }
};

// 暴露模态框控制方法给父组件
defineExpose({
  show: () => modalInstance?.show(),
  hide: () => modalInstance?.hide()
});
</script>

2. 修改TaskList组件 #

将TaskForm提升到TaskList中（全局仅一个），维护currentEditingTask变量存储当前编辑的任务，处理编辑和保存事件：

<template>
  <div class="container">
    <TaskItem
      v-for="task in props.tasks"
      :key="task.uuid"
      :task="task"
      @edit="handleEdit"
    />
  </div>
  
  <!-- 全局唯一的编辑模态框 -->
  <TaskForm 
    :task="currentEditingTask" 
    @save="handleSave"
    ref="taskFormRef"
  />
</template>

<script setup>
import { ref } from 'vue';
import TaskItem from './TaskItem.vue';
import TaskForm from './TaskForm.vue';

const props = defineProps({
  tasks: Array
});
const emit = defineEmits(['update-tasks']);

const currentEditingTask = ref(null);
const taskFormRef = ref(null);

// 接收子组件编辑事件，设置当前编辑任务
const handleEdit = (task) => {
  currentEditingTask.value = task;
};

// 保存编辑后的任务，更新任务列表
const handleSave = (updatedTask) => {
  const updatedTasks = props.tasks.map(t => t.uuid === updatedTask.uuid ? updatedTask : t);
  emit('update-tasks', updatedTasks);
  currentEditingTask.value = null;
};
</script>

3. 简化TaskItem组件 #

移除内部的TaskForm和本地状态，仅负责渲染任务和触发编辑事件：

<template>
  <div class="row align-items-center p-2 border rounded mt-2">
    <div class="col-3">
      {{ props.task.name }}
    </div>
    <button class="btn btn-primary" @click="handleEdit">
      <i class="bi bi-pencil-square"></i>
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  task: Object
});
const emit = defineEmits(['edit']);

// 触发编辑事件，传递当前任务给父组件
const handleEdit = () => {
  emit('edit', props.task);
};
</script>

• 避免DOM冗余和id冲突：全局仅一个模态框，资源占用更少
• 数据流清晰：父组件控制编辑状态，子组件仅负责UI渲染和事件触发，符合Vue单向数据流原则
• 扩展性强：后续新增任务功能时，只需清空currentEditingTask再打开模态框即可复用现有组件

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