文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3销毁组件方法及问题解决方案

2023-05-17 14:51

关注

问题描述:使用elementplus的dialog,当关闭弹窗后不刷新页面,直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件,或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了,只是dialog关闭了
解决方法:使用v-if 控制页面的创建与销毁。
由于我这里dailog中的数据比较多,所以我抽成了一个组件,在父组件中引用了,但是关闭弹窗的操作是在子组件的dialog中,所以这里又涉及到了子父组件的传值。再来复习一遍~。
ps:我这里的业务场景是通过在父页面点击按钮来控制子页面是否弹出来,所以具体实现是这样的:
在父页面中定义一个变量,默认为false,当点击弹出按钮时,将这个变量置为true;子页面中手动触发关闭dialog的事件中,将该变量设置为false,并将值传递待到这个父页面。
结构:
子组件

父组件:

接下来具体实现:
子组件:当子组件的dialog手动关闭时

关闭方法:
使用defineEmits,定义一个方法,并用一个变量去接收,在关闭事件中传递一个值,为false

const colse = defineEmits(["ok"])
function closeNDialog() {
  colse("ok", false)
}

父页面:在父页面引用的子组件中使用v-if绑定是否销毁标识,并定义方法去接收子组件传递过来的布尔值。在父页面通过点击button打开子组件的事件中将该值设置为true,此时子页面为以创建

<!-- 子组件,使用v-if接收,定义ok方法接收子传递过来的布尔值,
       需要注意。ok应和子页面中定义的保持一致,这个e就代表的是子页面colse方法传递过来的值,
       该值为false,然后我们将false赋值给是否销毁标识
 -->
    <aaa v-if=isExist @ok="e=>isExist=e"></aaa>
	//定义是否销毁标识,默认为false,代表销毁
	const isExist = ref(false);

父页面通过点击button打开子组件的事件

const showManage = (row) => {
  openDialog({}).then(resp => {
    isExist.value = true
    // 具体业务逻辑.....
  })
}

至此就完成了通过v-if 和子父组件传值的方法来销毁子页面的需求,实现了打开子页面请求数据后,再不刷新地址栏的情况下,再次打开子页面弹窗时,上一次请求的数据被清空,相当于重新创建了一个子页面。但是并不建议这样做,因为重复创建dom元素。我这里由于子页面中数据有很多,并且子页面中还嵌套了子页面,要想实现清空数据,目前我想到的解决方法就是创建,销毁子页面。欢迎其他大佬指正更好的实现方式。

到此这篇关于vue3 销毁组件方法的文章就介绍到这了,更多相关vue3 销毁组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯