vue3 銷毀組件方法及問題解決方案

Posted on by

問題描述：使用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 銷毀組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：