Vue.js 动态组件重新加载

Question

我有一个 vue.js 应用程序，我在其中使用 component 标签和 :is="currentView" 方法来更改活动视图。我有一个 "state machine"，它根据某些业务逻辑跟踪从一个组件到另一个组件的有效转换。有时这会告诉 vue 实例 currentView 的新值与旧值相同。如果发生这种情况，组件将不会被重新加载。即使视图相同，有什么方法可以强制组件重新加载？那就是我想要重新加载数据，并执行生命周期挂钩。

Answer 1

这似乎可以解决问题，但是它会导致视图闪烁，有什么办法可以避免这种情况吗？

  const oldView = this.currentView
  this.currentView = engine.advance()
  if(this.currentView == oldView) {
    //force reload!
    this.currentView = ''
    this.$nextTick(function () {
      this.currentView = oldView
    })
  }

Answer 2

您可以向组件定义添加一个独特的 key 属性，以便它正确触发所有组件生命周期方法。

您的组件定义应如下所示：

<component :is="view" :key="unique_key"></component>

有用的链接：

Reloading a dynamic component

Vue 'key' api reference

Vue.js 动态组件重新加载

Vue.js dynamic component reload

vue.js