vue3 destroy component method

Description of the problem: When using the dialog of elementplus, the page is not refreshed after closing the pop-up window, and the pop-up window is opened again to find that the last data is still stored in the pop-up window. Trying to define a close event, or using the property destroy-on-close provided in the api will not work. It was later discovered that this was a misunderstanding. When the pop-up window is closed, it does not mean that the component has been destroyed, but the dialog is closed.
Solution: use v-if to control the creation and destruction of the page.
Since I have a lot of data in the dailog here, I drew a component and referenced it in the parent component, but the operation of closing the pop-up window is in the dialog of the child component, so it involves the value transfer of the child and parent components. Let’s review it again~.
ps: My business scenario here is to control whether the child page pops up by clicking the button on the parent page, so the specific implementation is as follows: define a variable in the parent page, the default is false, and when the pop-up button is clicked, set this variable to true; in the event of manually triggering the dialog to close in the child page, set the variable to false,
and pass the value to the parent page.
Structure:
Subcomponents

parent component:

Next, the specific implementation:
Subcomponent: When the dialog of the subcomponent is closed manually Closing

method:
use defineEmits, define a method, and use a variable to receive it, and pass a value in the closing event, which is false

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

Parent page: Use v-if to bind whether to destroy the flag in the child component referenced by the parent page, and define a method to receive the Boolean value passed by the child component. Set the value to true in the event that the parent page opens the child component by clicking the button, and the child page is created at this time

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

The parent page opens the event of the child component by clicking the button

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

So far, the requirement of destroying subpages through v-if and the method of passing values ​​between child and parent components has been completed. After opening the subpage to request data, and without refreshing the address bar, when the subpage pop-up window is opened again, the data requested last time will be cleared, which is equivalent to recreating a subpage. But it is not recommended to do this because of the repeated creation of dom elements. Since there are a lot of data in the subpages, and there are subpages nested in the subpages, in order to clear the data, the solution I think of at present is to create and destroy the subpages. Other big guys are welcome to point out better implementation methods.
The above description is personal opinion, please correct me if the description is wrong, if you have any questions, please add v: 876942434, let’s make progress together~.