vue 自定义组件切换时刷新

我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法

一、通过v-if来刷新

当我们在父辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在父辈组件调用以下函数,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法）
上代码：

//父组件内容
<child v-if="show"></child>

js:     
refresh（）{
     this.show = false;
     this.$nextTick(() => {
         this.show = true;
            });
}

补充：使用v-if来有条件的渲染组件，还可以避免父组件异步传值失败的问题。比如我们要在父组件请求后台数据，并且要将数据在子组件渲染，这时就可以用v-if，有数据时才渲染子组件，就不会出错了。

二、通过key来刷新

key 属性不是给开发人员用的，而是用来 给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。
根据这个原理我们可以给key 直接绑定一个 时间戳

代码

父组件
<button @click="handleLoad">点击重新加载子级</button>
<children :key="timer"></children>

  methods: {
        handleLoad () {
            this.timer = new Date().getTime()
        }
    }

每次点击的时候都会重新加载子组件 ，created() 生命周期函数每次都会执行，重新生成dom 元素。也省的用watch 去监听了！

总结：以上两种方法都能实现，应该还有其他的方式，知道的小伙伴可在下方评论哦。
另外：本文纯属个人笔记，如有说错的地方，希望大家积极纠正