如何重新加载 vue 组件？答案

【问题标题】：How can I reload a vue component?如何重新加载 vue 组件？
【发布时间】：2018-02-22 23:27:03
【问题描述】：

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

this.selectedContinent = ""

但我想使用其他解决方案

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

this.$forceUpdate()

我试过了，还是不行

演示和完整代码如下：

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

你可以点击按钮测试试试

我需要更新属性数据以外的解决方案

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

您必须为您的组件分配一个键。当你想重新渲染一个组件时，你只需更新密钥。更多信息here.

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

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

【讨论】：

【解决方案2】：

我使用 v-if 来渲染组件：

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

demo

【讨论】：

这对我有用 - 我将 data.show 默认设置为 false 然后设置为 true 并呈现组件。
代替 v-if，使用 :key="componentKey" demo

【解决方案3】：

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

而不是this.$forceUpdate()

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

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

查看更新的小提琴Link。

更新：

另一种方法：Link

【讨论】：

在你的小提琴上工作。但在我的真实情况下，它不起作用。在我的真实情况下，我必须刷新页面。您是否有其他解决方案可以在不刷新页面的情况下更新整个组件？
我添加了另一种方法。
在我的真实案例中似乎无法使用。我的真实案例是这样的：<template> ... </template> <script> export default{ props: [...], data() { return { ... }; }, computed:{ .... } }; </script>。它不能定义函数
您可以在导出之前添加 initialState() 函数，默认为您的脚本标签。
我已经添加了。但是，有一些错误。看起来你的第二个解决方案不适合我的真实情况

【解决方案4】：

我认为我需要重新加载，但我能够将挂载钩子内的所有内容移动到一个 init 方法。挂载的钩子调用 init 方法，如果需要父级重新加载所有内容，它可以使用 ref 调用 this.$refs.componentName.init();。

【讨论】：

【解决方案5】：

最简单的一个

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

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

只需更新您的状态

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

它会自动更新你的组件

【讨论】：

【解决方案6】：

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

【讨论】：