组件销毁前通过 emit 通知父组件保存状态，符合单向数据流原则；子组件在卸载钩子中发出校验后的数据，父组件统一处理持久化逻辑并支持缓存、本地存储或服务端提交。
组件销毁前用 emit 主动通知父组件保存状态，是一种清晰、可控的协作方式。关键不在于“让子组件自己存”，而在于“子组件明确告知父组件：我要走了，这是当前数据，请收好”。这比在子组件内部调用 localStorage 或直接操作外部状态更符合单向数据流原则，也便于统一管理。
子组件：销毁前 emit 状态快照
在组件即将卸载时（Vue 3 用 onBeforeUnmount，Vue 2 用 beforeDestroy），触发一个语义化事件，如 save-state，并把需要保留的数据作为参数发出：
- Vue 3（Composition API）示例：
使用defineEmits声明事件，确保类型安全；在onBeforeUnmount中调用emit('save-state', localData.value) - Vue 2（Options API）示例：
在beforeDestroy钩子中执行this.$emit('save-state', this.formData) - 注意：只 emit 当前有效、已校验过的数据，避免 emit 未完成异步结果或空值
父组件：监听并接管持久化逻辑
父组件不依赖子组件自行存储，而是统一响应 @save-state 事件，决定如何备份：
- 存入内存缓存（如 ref 或 reactive 对象），供后续
<keep-alive></keep-alive>激活时恢复 - 写入浏览器存储（
localStorage或sessionStorage），支持跨会话保留 - 提交到服务端草稿接口（适合表单类场景），实现真正的“自动保存”
- 配合路由元信息，按页面路径做键名隔离，避免不同页面状态互相覆盖
配套建议：增强可靠性与可维护性
仅靠 emit 不足以应对所有边界情况，需搭配以下实践：
- 子组件 emit 前加简单校验：比如
if (isFormValid()) emit('save-state', data)，防止无效状态污染备份 - 父组件监听时做防抖或节流（尤其表单高频输入场景），避免重复保存
- 为每个动态组件分配唯一 ID（如路由 path + query 组合），使保存/恢复能精准匹配
- 在父组件 mounted 或 activated 钩子中检查是否有对应缓存，并主动恢复（例如
if (cache.has(id)) restoreFromCache(id)）
