Vue在重置按钮上重新渲染组件

【问题标题】：Vue rerender component on reset buttonVue在重置按钮上重新渲染组件
【发布时间】：2020-08-08 02:12:15
【问题描述】：

我有一个重置按钮，可以将状态重置为初始值。我需要用 currentTab 重新渲染组件，有什么办法可以做到吗？

<button @click="resetData">reset</button>

<keep-alive>
    <component :is="currentTab"></component>
</keep-alive>

methods: 
resetData() {
    this.$store.dispatch('resetData')
    // re-render component based on the currentTab
    ??
}

currentTab 我从标签列表中获取：

tabs: [One, Two, Three]

【问题讨论】：

这能回答你的问题吗？ Can you force Vue.js to reload/re-render?
不幸的是它不起作用

标签： vue.js button components render vue-reactivity

【解决方案1】：

有几种方法可以强制渲染。要从父级执行此操作，请在子级上设置 key。更改密钥将导致子级重新渲染：

HTML：

<component :is="currentTab" :key="tabKey"></component>

在父级中，将键定义为数字：

data() {
  return {
    tabKey: 0
  }
}

更改key：

methods: {
  resetData() {
    this.tabKey++;
  }
}

注意：在组件中使用 this.$forceUpdate 只会导致其视图重新呈现。

【讨论】：