問題描述：使用elementplus的dialog,當關閉彈窗后不刷新頁面，直接再次打開發(fā)現(xiàn)彈窗中還存留上一次的數(shù)據。嘗試定義關閉事件，或者使用api中提供的屬性destroy-on-close 都不行。后來發(fā)現(xiàn)這是一個誤區(qū)。彈窗關閉時并不代表這個組件已經被銷毀了，只是dialog關閉了
解決方法：使用v-if 控制頁面的創(chuàng)建與銷毀。
由于我這里dailog中的數(shù)據比較多，所以我抽成了一個組件，在父組件中引用了，但是關閉彈窗的操作是在子組件的dialog中，所以這里又涉及到了子父組件的傳值。再來復習一遍~。
ps:我這里的業(yè)務場景是通過在父頁面點擊按鈕來控制子頁面是否彈出來，所以具體實現(xiàn)是這樣的：
在父頁面中定義一個變量，默認為false,當點擊彈出按鈕時，將這個變量置為true；子頁面中手動觸發(fā)關閉dialog的事件中，將該變量設置為false，并將值傳遞待到這個父頁面。
結構：
子組件

父組件：

接下來具體實現(xiàn)：
子組件：當子組件的dialog手動關閉時

關閉方法：
使用defineEmits，定義一個方法，并用一個變量去接收，在關閉事件中傳遞一個值，為false

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

父頁面：在父頁面引用的子組件中使用v-if綁定是否銷毀標識，并定義方法去接收子組件傳遞過來的布爾值。在父頁面通過點擊button打開子組件的事件中將該值設置為true,此時子頁面為以創(chuàng)建

<!-- 子組件，使用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
    // 具體業(yè)務邏輯.....
  })
}

至此就完成了通過v-if 和子父組件傳值的方法來銷毀子頁面的需求，實現(xiàn)了打開子頁面請求數(shù)據后，再不刷新地址欄的情況下，再次打開子頁面彈窗時，上一次請求的數(shù)據被清空，相當于重新創(chuàng)建了一個子頁面。但是并不建議這樣做，因為重復創(chuàng)建dom元素。我這里由于子頁面中數(shù)據有很多，并且子頁面中還嵌套了子頁面，要想實現(xiàn)清空數(shù)據，目前我想到的解決方法就是創(chuàng)建，銷毀子頁面。歡迎其他大佬指正更好的實現(xiàn)方式。

到此這篇關于vue3 銷毀組件方法的文章就介紹到這了,更多相關vue3 銷毀組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論