Vue3中编辑联系人的Modal应置于子组件还是父组件？

• 第一种方案：实现简单、维护成本低，10个Modal的DOM开销几乎可以忽略（Modal默认隐藏，不会占用渲染资源），如果项目赶进度、优先快速交付，完全可以用。但从组件设计的优雅性和长远维护来看，第二种方案更优——只维护一个Modal实例，避免冗余DOM，也符合「单一职责」原则：联系人组件只管展示和触发编辑，Modal统一处理编辑逻辑，还能帮你理解Vue的组件通信逻辑。
• 结论：练手项目或赶进度选第一种；想学习Vue组件通信、做更优雅的组件设计选第二种，它的实现并没有你想的那么复杂。

核心逻辑是子组件触发编辑事件并传递数据，父组件接收数据后打开共享的Modal，编辑完成后父组件更新列表，以下是完整代码示例（用Vue3的<script setup>语法，新手友好）：

1. 联系人子组件（ContactItem.vue） #

负责展示单条联系人信息，点击编辑按钮时向父组件发送事件并传递当前联系人数据：

<template>
  <div class="contact-item">
    <p>姓名：{{ contact.name }}</p>
    <p>手机号：{{ contact.phone }}</p>
    <button @click="triggerEdit">编辑</button>
  </div>
</template>

<script setup>
// 定义接收的联系人数据props
const props = defineProps({
  contact: {
    type: Object,
    required: true,
    default: () => ({ id: '', name: '', phone: '' })
  }
})

// 定义要触发的事件
const emit = defineEmits(['edit-contact'])

// 点击编辑按钮时触发事件，传递当前联系人
const triggerEdit = () => {
  emit('edit-contact', props.contact)
}
</script>

<style scoped>
.contact-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

2. 父组件（ContactList.vue） #

负责渲染联系人列表、维护共享Modal的状态，接收子组件的编辑事件并打开Modal，同时处理编辑完成后的列表更新：

<template>
  <div class="contact-list">
    <!-- 循环渲染所有联系人子组件 -->
    <ContactItem
      v-for="contact in contactList"
      :key="contact.id"
      :contact="contact"
      @edit-contact="openEditModal"
    />

    <!-- 共享的编辑Modal -->
    <EditModal
      v-model:visible="isModalOpen"
      :edit-contact="currentEditContact"
      @save-contact="updateContactList"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ContactItem from './ContactItem.vue'
import EditModal from './EditModal.vue'

// 模拟联系人列表数据
const contactList = ref([
  { id: 1, name: '张三', phone: '13800138000' },
  { id: 2, name: '李四', phone: '13900139000' },
  { id: 3, name: '王五', phone: '13700137000' }
])

// Modal显示状态
const isModalOpen = ref(false)
// 当前要编辑的联系人数据（深拷贝避免直接修改原数据）
const currentEditContact = ref({})

// 打开编辑Modal，接收子组件传递的联系人
const openEditModal = (contact) => {
  currentEditContact.value = JSON.parse(JSON.stringify(contact))
  isModalOpen.value = true
}

// 保存编辑后的联系人，更新列表
const updateContactList = (updatedContact) => {
  const targetIndex = contactList.value.findIndex(item => item.id === updatedContact.id)
  if (targetIndex !== -1) {
    contactList.value[targetIndex] = updatedContact
  }
  isModalOpen.value = false
}
</script>

3. 编辑Modal组件（EditModal.vue） #

负责展示编辑表单，接收父组件传递的联系人数据，编辑完成后向父组件发送保存事件：

<template>
  <!-- Modal遮罩层 -->
  <div class="modal-overlay" v-if="visible" @click="closeModal">
    <!-- Modal内容区，阻止事件冒泡避免点击内容关闭 -->
    <div class="modal-content" @click.stop>
      <h3>编辑联系人</h3>
      <div class="form-group">
        <label>姓名：</label>
        <input type="text" v-model="formData.name" />
      </div>
      <div class="form-group">
        <label>手机号：</label>
        <input type="tel" v-model="formData.phone" />
      </div>
      <div class="modal-buttons">
        <button @click="closeModal">取消</button>
        <button @click="saveEdit">确认保存</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 定义接收的props：Modal显示状态、待编辑的联系人
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  editContact: {
    type: Object,
    default: () => ({})
  }
})

// 定义要触发的事件：更新Modal状态、保存编辑后的数据
const emit = defineEmits(['update:visible', 'save-contact'])

// 表单数据，避免直接修改父组件传递的props
const formData = ref({})

// 监听父组件传递的联系人数据，同步到表单
watch(() => props.editContact, (newContact) => {
  formData.value = { ...newContact }
}, { immediate: true, deep: true })

// 关闭Modal
const closeModal = () => {
  emit('update:visible', false)
}

// 保存编辑内容，向父组件发送事件
const saveEdit = () => {
  emit('save-contact', formData.value)
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
}

.form-group {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style>

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