vue3销毁组件问题怎么解决

这篇文章主要介绍“vue3销毁组件问题怎么解决”，在日常操作中，相信很多人在vue3销毁组件问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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
    // 具体业务逻辑.....
  })
}

到此，关于“vue3销毁组件问题怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！