在 Vue 3 中，直接修改被 v-model 绑定的响应式对象属性后立即清空，会导致父组件接收到已清空的数据；正确做法是先深拷贝数据再提交，最后重置表单。
在 vue 3 中，直接修改被 `v-model` 绑定的响应式对象属性后立即清空，会导致父组件接收到已清空的数据；正确做法是先深拷贝数据再提交，最后重置表单。
在 Vue 3 的组合式 API 应用中，表单提交后清空字段看似简单，却容易因对象引用问题引发意外行为。你遇到的问题本质是：newBook 是一个普通 JavaScript 对象（非响应式），但被 v-model 双向绑定后，其属性变更会实时反映在模板中；当你调用 emit('add-book', newBook) 时，若尚未完成拷贝就直接清空 newBook.title 和 newBook.author，父组件实际接收到的可能是已被覆盖为空字符串的对象——因为 JavaScript 中对象传参是引用传递。
✅ 正确解决方案是：在 emit 前创建一个独立副本，确保父组件获取的是提交瞬间的完整数据，再安全地重置本地表单状态。
以下是修复后的 AddBook.vue 关键代码（已优化可读性与健壮性）：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<script setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['add-book'])
const isValid = ref(true)
// 使用 reactive 更清晰（可选），但此处用普通对象 + 显式拷贝更轻量
const newBook = {
title: '',
author: ''
}
const handleSubmit = () => {
isValid.value = !(newBook.title.trim() && newBook.author.trim())
if (isValid.value) {
// ✅ 关键：创建浅拷贝（适用于扁平对象）
const submittedBook = { ...newBook }
emit('add-book', submittedBook)
// ✅ 安全清空：仅影响本地表单，不影响已发出的数据
newBook.title = ''
newBook.author = ''
}
}
</script>
<template>
<h2 class="display-4">Add a book</h2>
<form @submit.prevent="handleSubmit">
<div v-if="!isValid" class="p-2 text-center alert alert-danger">
The form data is invalid! Title and author are required.
</div>
<div class="mb-2">
<label for="title" class="form-label">Title</label>
<input id="title" class="form-control form-control-sm" type="text" v-model="newBook.title">
</div>
<div class="mb-2">
<label for="author" class="form-label">Author</label>
<input id="author" class="form-control form-control-sm" type="text" v-model="newBook.author">
</div>
<div class="mb-2">
<button class="btn btn-sm btn-success w-100" type="submit">Add</button>
</div>
</form>
</template>? 注意事项与进阶建议：
立即学习“前端免费学习笔记（深入）”；
- 若
newBook结构未来可能嵌套（如含tags: []或metadata: {}），请改用structuredClone(newBook)（现代浏览器支持）或JSON.parse(JSON.stringify(newBook))（兼容性更好，但不支持函数/Date/undefined）； - 更推荐方案：使用
ref()包裹newBook（如const newBook = ref({ title: '', author: '' })），然后通过emit('add-book', { ...newBook.value })拷贝，语义更清晰且便于后续扩展响应式逻辑； - 表单验证建议加入
.trim()防止纯空格提交，提升用户体验； - 提交成功后可配合
reset()方法或添加key强制重渲染表单（适用于复杂场景），但对当前简单表单，手动清空已足够高效。
该模式兼顾简洁性、可维护性与 Vue 最佳实践，是 Vue 3 表单处理的标准范式之一。
