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銷毀組件問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！