如何重新加载Vue组件？

Question

我知道解决方案是像这样更新prop数据：

this.selectedContinent = ""

但我想使用另一种解决方案

在阅读了一些参考资料之后，解决方案是：

this.$forceUpdate()

我尝试了，但是没有用

演示和完整代码如下：

https://jsfiddle.net/Lgxrcc5p/13/

您可以单击按钮测试来尝试

除了更新属性数据外，我还需要其他解决方案

Answer 1

您必须为组件分配一个密钥。当您要重新渲染组件时，只需更新密钥即可。更多信息在这里。

<template>
    <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}

Answer 2

我使用v-if渲染组件：

<div id="app">
      <button type="button" @click="updateComponent">test</button>
      <test-el v-if="show"></test-el>
</div>

演示

Answer 3

您可以用来Object.assign分配初始数据属性。

代替this.$forceUpdate()

你应该使用Object.assign(this.$data,this.$options.data.call(this)).

这里我们使用 this.$options.data 获取原始数据并将该值分配给 this.$data。

请参阅更新的小提琴链接。

更新：

另一种方法：链接