- 背景:组件需要重新加载,即重新走一遍组件的生命周期
- 常见解决方案:
- 使用v-if指令:v-if 可以实现 true (加载)和 false (卸载)
async reloadComponent() {
this.show= false
// 加上 nextTick
this.$nextTick(function() {
this.show= true
})
// 或者这种写法
// await this.$nextTick()
// this.show = true
},
- 使用key属性:Vue 的 key 属性可以强制重新渲染组件。当组件的 key 值发生变化时,Vue 会销毁旧的组件实例并创建一个新的。
// 组件绑定key
<ChildComponent :key="componentKey" />
// 更新key
reloadComponent() {
this.componentKey += 1; // 修改 key 的值
},