vue組件的刷新方式

平時在做項目的過程鍾時常需要刷新組件，這里抽空總結下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，再設為true

　　　this.btnShow = false

     this.$nextTick(() => (this.btnShow = 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