Question

我知道解决方案是更新道具数据，如下所示：

this.selectedContinent = ""

但我想使用其他解决方案

在我阅读了一些参考文献后，解决方法是：

this.$forceUpdate()

我尝试了，但它不起作用

这样的演示和完整代码：

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

您可以点击按钮测试来试试

我需要一个解决方案，而不是更新属性数据

Answer 1

我使用v-if渲染组件：

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

demo

Answer 2

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

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

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

Answer 3

最简单的

对于对象中的数据，使用您的密钥作为 JSON.stringify(data)

  <component :key="JSON.stringify(data)" :data="data" />

只需更新您的状态

$vm.data={
name:'balaji'
}

它会自动更新您的组件

Answer 4

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

而不是this.$forceUpdate()

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

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

请参阅更新的小提琴Link。

<强>更新：

另一种方法：Link

Answer 5

我也面临同样的问题。我使用location.reload()重新加载组件。
这可能不是解决此问题的正确方法。但这解决了我的问题。

Answer 6

我以为我需要重新加载，但是我能够将挂接的钩子中的所有内容移至init方法。挂接的钩子调用init方法，如果您需要父级重新加载所有内容，则可以使用ref来调用this。$ refs.componentName.init（）;。

如何重新加载vue组件？

6 个答案: