vue3 销毁组件方法及问题解决方案
问题描述：使用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 销毁组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法，非常的实用，有需要的小伙伴可以参考下2018-02-02
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。这篇文章给大家介绍了Vue.js教程之计算属性，非常不错，感兴趣的的朋友一起看看吧2016-11-11
在vue2中我们通常会在模板中通过三目运算符和require来实现动态图片,下面这篇文章主要给大家介绍了关于Vite不能使用require问题的解决方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3的自定义hook函数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问子组件内部属性或事件,本文给大家介绍了解决vue3使用ref 获取不到子组件属性问题,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要为大家介绍了Vue Router4路由导航守卫实例全面解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue-cli V3.0版本的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
我们使⽤vue-element-admin前端框架开发后台管理系统时,⼀般都会涉及到菜单的权限控制问题,下面这篇文章主要给大家介绍了关于vue使用路由守卫实现菜单的权限设置的相关资料,需要的朋友可以参考下2023-06-06
众所周知,electron是可以开发桌面端的框架,那我们有一些数据不想让别人看到,只能在自己的电脑上展示时怎么办呢,这个时候就可以用到本地数据库,本文将以sqlite3为例介绍一下electron如何使用本地数据库2023-10-10
这篇文章主要为大家详细介绍了vue实现侧边定位栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论