重置按钮上的Vue rerender组件

Question

我有一个重置按钮，可将状态重置为初始值。我需要使用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]

Answer 1

有几种强制渲染的方法。为此，请在父级上为子级设置key。更改密钥将导致孩子重新提交：

HTML：

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

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

data() {
  return {
    tabKey: 0
  }
}

更改key：

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

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