vue3 烧毁组件方法

问题描述：利用elementplus的dialog,当关闭弹窗后不刷新页面，直接再次打开辟现弹窗中还存留上一次的数据。尝试定义关闭变乱，大概利用api中提供的属性destroy-on-close 都不可。厥后发现这是一个误区。弹窗关闭时并不代表这个组件已经被烧毁了，只是dialog关闭了
办理方法：利用v-if 控制页面的创建与烧毁。
由于我这里dailog中的数据比力多，以是我抽成了一个组件，在父组件中引用了，但是关闭弹窗的利用是在子组件的dialog中，以是这里又涉及到了子父组件的传值。再来复习一遍~。
ps:我这里的业务场景是通过在父页面点击按钮来控制子页面是否弹出来，以是详细实现是如许的：
在父页面中定义一个变量，默以为false,当点击弹出按钮时，将这个变量置为true；子页面中手动触发关闭dialog的变乱中，将该变量设置为false，并将值转达待到这个父页面。
布局：
子组件

父组件：

接下来详细实现：
子组件：当子组件的dialog手动关闭时

关闭方法：
利用defineEmits，定义一个方法，并用一个变量去接收，在关闭变乱中转达一个值，为false

1. const colse = defineEmits(["ok"])
2. function closeNDialog() {
3.   colse("ok", false)
4. }

复制代码

父页面：在父页面引用的子组件中利用v-if绑定是否烧毁标识，并定义方法去接收子组件转达过来的布尔值。在父页面通过点击button打开子组件的变乱中将该值设置为true,此时子页面为以创建

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

复制代码

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

1. const showManage = (row) => {
2.   openDialog({}).then(resp => {
3.     isExist.value = true
4.     // 具体业务逻辑.....
5.   })
6. }

复制代码

至此就完成了通过v-if 和子父组件传值的方法来烧毁子页面的需求，实现了打开子页面哀求数据后，再不刷新地址栏的情况下，再次打开子页面弹窗时，上一次哀求的数据被清空，相称于重新创建了一个子页面。但是并不建议如许做，由于重复创建dom元素。我这里由于子页面中数据有很多，并且子页面中还嵌套了子页面，要想实现清空数据，如今我想到的办理方法就是创建，烧毁子页面。欢迎其他大佬指正更好的实现方式。
以上描述为个人看法，描述有误的地方欢迎各人指正，有问题可加v：876942434,一起进步~。

来源：https://blog.csdn.net/fortunate_leixin/article/details/128583420
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！