HTML 打开新页面,关闭子页面传值回父页面

本文介绍了一种在父窗体中通过调用子窗体的方法来实现数据交互的技术。具体操作为,父窗体使用window.open()打开子窗体,并通过window.opener调用父窗体中的getUsers()方法传递参数,完成数据的返回。最后,子窗体通过window.close()关闭自身。

父页面:

 window.open("web/issue/getUsers");  打开新页面

子页面:

   window.opener.getUsers("sss");  //传值回打开它的父页面
   window.close();

### 组件向父组件并确保页面刷新后数据不丢失 #### 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> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值