親コンポーネントと子コンポーネントの間: ボタンをクリックすると、データをアップロードするためのダイアログ ボックスがポップアップ表示されます。子コンポーネントがダイアログ ボックスを閉じた後、アップロードされたデータにはキャッシュの問題があります。
アプリケーション シナリオ: ページ A で操作が必要なデータを確認する - ページ A のボタンをクリックする - ダイアログ B がポップアップする - ダイアログ B を閉じる - 再度ページ A に戻ると、チェックされた状態のまま - ダイアログ B を再度開く - B でリストデータはまだ存在します
解決策: 親と子の間で通信し、子コンポーネントを介してイベントを起動し、親コンポーネントがメソッドを書き直して、子コンポーネントのイベントのポップアップ ウィンドウを閉じます。
< el- dialog
v- model= "shown"
width= "720px"
: close- on- click- modal= "false"
title= "新增"
draggable
@close= "closeDialog"
>
< el- button : loading= "isSubmitting" @click= "closeDialog" > 关闭< / el- button>
< el- button type= "primary" : loading= "isSubmitting" @click= "save" > 保存< / el- dialog>
< script lang= "ts" >
function closeDialog ( ) {
emit ( 'close' ) ;
}
< / script>
< el- button size= "small" type= "primary" @click= "openAttachment" : disabled= "selection.length < 2" > 新增< / el- button>
< Add v- if = "open" : order- id= "selection.map(item => item.id)" @close= "closeAttachment($event)" / >
< script lang= "ts" >
import BatchAttachmentModal from '@/views/components/Add.vue' ;
export default defineComponent ( {
components : {
Add} ,
const open = ref< boolean> ( false ) ;
function openAttachment ( ) {
open. value = true ;
}
function closeAttachment ( value ) {
open. value = false ;
}
} )
< / script>