Vue 重複使用同一元件造成的問題

洋仔 發表於 2022-01-25
Vue

情況是這樣的,
我在一個vue中,引用了A元件,並且使用了兩次,程式碼如下:

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<A :data="formData" :update="ToRefresh"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

子元件A是由兩個select組成,選擇器列表資料是需要非同步axios請求的。
在父元件獲得formData後,會把ToRefresh值變為true。A元件watch了這個值——會觸發獲取A元件的非同步axios請求。

目前出現的問題就是:第一個A元件無法正常顯示選中文字,但是第二個A元件就可以。如果把第二個A元件刪除掉,唯一的A元件就可以正常顯示。如圖:
image.png

錯誤的嘗試:
一開始百度了下,第二個元件換了個名字重新引入,像這樣——失敗

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<B :data="formData" :update="ToRefresh"></B>
</template>

import A from '@/components/A.vue'
import B from '@/components/A.vue'

components:{
A,B
}

第二次嘗試使用ref指定子元件——失敗:

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

// this.ToRefresh=true 不使用子元件watch父元件同一個值的方式
this.$refs.A1.getList()
this.$refs.A2.getList()

第三次在第二次嘗試的基礎上加了setTimeout,讓第二個元件響應慢300毫秒——成功了!!

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

// this.ToRefresh=true 不使用子元件watch父元件同一個值的方式
this.$refs.A1.getList()
setTimeout(()=>{
    this.$refs.A2.getList()
},300)

正確的顯示:
image.png

不知道有沒有其它什麼好的解決方法呢?