vue 使用nextTick實現數據改變刷新組件

需求場景：首頁中頂部有切換tab，並且引入了多個自定義子組件展示各種數據，現在需要在切換tab時重新給各個組件賦值數據，實現實時刷新，讓子組件重新渲染

實現：

子組件的mounted中使用nextTick

//子組件 
mounted(){

this.$nextTick(()=> {
        this.initMap();//子組件渲染數據的方法
    });
   },

但是，此時切換刷新還是有點問題，有數據時切換tab不會刷新，只有從數據為空切到有數據時才會刷新（正在看nextTick實現原理，暫時還不清楚原因，不過有查到說是

在生命周期mounted里面渲染的時候，不能百分百保證所有的自組件都能被渲染）


我用的解決辦法（前輩原代碼里使用的方法）：
在引入的子組件上加上時間戳 :key='timer'

//父組件
<template>
  <child :key='timer' />
</template>
<script>
export default {
  name: "",
  components: {
　　child
},
data() {
    return {
      timer: "1",
    }
}，
methods:{
   //tab切換方法
　　tabChange(){
     this.timer = new Date().getTime(); //加時間戳，否則不刷新
　　}

}
}
</script>

ps：網上還查到一個方法，不過還沒試

 

 原文：https://www.bbsmax.com/A/pRdBamD95n/