我们在使用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 去监听了！
总结：以上两种方法都能实现，应该还有其他的方式，知道的小伙伴可在下方评论哦。
另外：本文纯属个人笔记，如有说错的地方，希望大家积极纠正
