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/