【问题标题】: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

      【讨论】:

      • 在你的小提琴上工作。但在我的真实情况下,它不起作用。在我的真实情况下,我必须刷新页面。您是否有其他解决方案可以在不刷新页面的情况下更新整个组件?
      • 我添加了另一种方法。
      • 在我的真实案例中似乎无法使用。我的真实案例是这样的:&lt;template&gt; ... &lt;/template&gt; &lt;script&gt; export default{ props: [...], data() { return { ... }; }, computed:{ .... } }; &lt;/script&gt;。它不能定义函数
      • 您可以在导出之前添加 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() 重新加载组件。
          这可能不是解决此问题的正确方法。但这解决了我的问题。

          【讨论】:

            猜你喜欢
            • 2021-02-18
            • 2019-04-27
            • 2021-02-14
            • 2018-07-18
            • 2020-09-12
            • 2019-12-17
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多