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

父組件：

接下來(lái)具體實(shí)現(xiàn)：
子組件：當(dāng)子組件的dialog手動(dòng)關(guān)閉時(shí)

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

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

父頁(yè)面：在父頁(yè)面引用的子組件中使用v-if綁定是否銷(xiāo)毀標(biāo)識(shí)，并定義方法去接收子組件傳遞過(guò)來(lái)的布爾值。在父頁(yè)面通過(guò)點(diǎn)擊button打開(kāi)子組件的事件中將該值設(shè)置為true,此時(shí)子頁(yè)面為以創(chuàng)建

<!-- 子組件，使用v-if接收，定義ok方法接收子傳遞過(guò)來(lái)的布爾值，
       需要注意。ok應(yīng)和子頁(yè)面中定義的保持一致，這個(gè)e就代表的是子頁(yè)面colse方法傳遞過(guò)來(lái)的值，
       該值為false，然后我們將false賦值給是否銷(xiāo)毀標(biāo)識(shí)
 -->
    <aaa v-if=isExist @ok="e=>isExist=e"></aaa>
	//定義是否銷(xiāo)毀標(biāo)識(shí)，默認(rèn)為false,代表銷(xiāo)毀
	const isExist = ref(false);

父頁(yè)面通過(guò)點(diǎn)擊button打開(kāi)子組件的事件

const showManage = (row) => {
  openDialog({}).then(resp => {
    isExist.value = true
    // 具體業(yè)務(wù)邏輯.....
  })
}

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

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

最新評(píng)論