子组件给父组件传值，页面刷新

### 子组件向父组件传递值并确保页面刷新后数据不丢失 #### Vue 中的解决方案 在 Vue 应用程序中，子组件可以通过事件触发的方式将数据发送到父组件。对于防止页面刷新导致的数据丢失问题，可以采用多种策略来保存和恢复状态。 1. **通过自定义事件通信** 使用 `$emit` 方法可以让子组件通知其父组件某些事情已经发生，并附带任何必要的有效载荷。这允许父级监听这些特定于应用逻辑的事件并作出相应的反应[^1]。 2. **利用 `provide` 和 `inject` 实现跨层级依赖注入** 如果希望更灵活地管理多个嵌套层次间的共享状态，则可考虑使用提供者模式——即 `provide/inject` API 来分发属性而无需显式地一层层向下传递它们。不过需要注意的是，默认情况下这种方式不会自动更新子组件中的静态初始值；因此如果需要动态响应的变化，应该让 provide 函数返回一个新的计算属性或者 watcher 的结果。 3. **持久化存储机制** 面对浏览器刷新带来的挑战，推荐的做法是借助本地储存技术如 localStorage 或 sessionStorage 将重要信息缓存起来，在每次加载时读取该位置的信息作为默认配置项填充表单或其他交互元素。这样即使用户关闭再打开网页也能看到之前输入的内容[^2]。 4. **使用 Vuex 进行全局状态管理 (适用于较大规模的应用)** 对于较为复杂的场景下，尤其是涉及到多处都需要访问同一份最新版本的状态时，引入专门的状态管理模式会更加高效合理。Vuex 是官方支持的状态容器库，它提供了集中式的 store 结构用于处理应用程序级别的状态逻辑[^3]。 5. **结合 keep-alive 组件优化性能与体验** 当存在频繁切换但又不想每次都销毁重建视图的情况下，`<keep-alive>` 可以帮助我们缓存内部实例及其 DOM 节点，从而减少不必要的重绘开销以及维持住临时性的UI状态不变[^4]。 ```javascript // 父组件 ParentComponent.vue import { ref, onMounted } from 'vue'; export default { setup() { const message = ref('Initial Message'); function handleMessageFromChild(newMsg) { message.value = newMsg; // Save to local storage when the value changes. window.localStorage.setItem('message', JSON.stringify(message.value)); } onMounted(() => { // Restore data after page reloads. const savedMessage = window.localStorage.getItem('message'); if (savedMessage !== null && savedMessage !== undefined){ message.value = JSON.parse(savedMessage); } }); return { message, handleMessageFromChild }; }, }; ``` ```html <!-- Child Component --> <button @click="$emit('update:message', 'Updated Message')">Update</button> ``` ```html <!-- Parent Component Template --> <div> {{ message }} <child-component @update:message="handleMessageFromChild"></child-component> </div> ```