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

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 只会导致其视图重新呈现。

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

Vue rerender component on reset button

components

render

button

vue.js

vue-reactivity