Vue 组件间通信并不是每一次操作都会触发新的通信
生活随笔
收集整理的這篇文章主要介紹了
Vue 组件间通信并不是每一次操作都会触发新的通信
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求:新增或者修改都需要組件間立馬通信。
操作:把B組件(子組件,這里指的是三級聯動組件)的數據傳輸過來,在A(父組件)組件中處理 即 子傳父 這里指的是修改頁面或者新增頁面三級聯動下拉選擇完之后 點擊 提交 會執行A組件的修改操作。
也就是子組件=>父組件傳數據
修改回顯頁碼:
或者 把下圖紅框中的數據在點擊修改的時候把數據在彈框(dialog)的三級聯動中顯示即上圖紅框。也就是父組件=>子組件傳數據
結果:但是發現父子組件間互相通信時,剛開始刷新table頁面后父子間傳信利用props(父=>子)或者在自定義事件實現(子=>父)這個第一次是沒問題的。但是之后不刷新在點擊修改按鈕或者新增按鈕時,拿到的數據都不是最新的數據,是上一次操作完的舊數據或者就是沒數據。
為了實現每一次操做立馬觸發通信,拿到最新傳遞的數據,所以解決辦法如下:
父=>子 觸發立馬通信:
父組件Home.vue:
<!--areaselectupdate 是子組件--> <areaselectupdate :regionfu="xqy.uparea" :key="timer"v-on:domainPro="getDomainPro"v-on:domainCity="getDomainCity"v-on:domainDist="getDomainDist"></areaselectupdate>利用 :key="timer" 和 下面的日期毫秒值來立馬觸發父=>子通信
//編輯回顯handleUpdateClick(event){this.timer = new Date().getTime();}點擊修改則修改的方法里面加獲取當前時間毫秒值的計算,點擊新增就在新增的方法里面加。點哪里哪里加。 子組件=>父組件也是一樣的。
總結
以上是生活随笔為你收集整理的Vue 组件间通信并不是每一次操作都会触发新的通信的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2023武汉工程大学计算机考研信息汇总
- 下一篇: c语言版实验1集合并交差,数据结构(C语