vue元件的重新整理方式
阿新 • • 發佈:2021-07-01
平時在做專案的過程鍾時常需要重新整理元件,這裡抽空總結下vue重新整理元件的方式
vue重新整理元件的方式:
1.給元件不同的key值,這樣每次進入頁面時,當key發生變化時,會釋放原有元件重新載入改元件,這也是我平時最常用的方式
<group :key="new Date().getTime()"> <datetime title="請選擇時間" v-model="time" format="YYYY-MM-DD" :start-date="start" :end-date="end" year-row="{value}年" month-row="{value}月" day-row="{value}日" confirm-text="完成" cancel-text="取消" ></datetime> </group>
2.使用v-if重新整理子元件,使用v-if控制改元件的顯示隱藏,當點選重新整理按鈕時,元件需要重新顯示,當v-if裡的值發生改變時,元件會重新渲染,來達到強制重新整理元件的方式
<button v-if="btnShow" ></button>this.btnShow=false this.$nextTick(()=>(this.btnShow=true))
// 先將this.btnShow 設為false,再設為true
3.使用元件內建$forceUpdate方法,使用前需要在配置中啟用
import Vue from 'vue' Vue.forceUpdate() 然後在元件在使用 this.$forceUpdate()
4.重新整理整個頁面:this.router.go(0)
這裡附上其他博主的部落格連結,https://blog.csdn.net/qq_41913971/article/details/113937432