如何仅刷新 Nuxt 中的 nuxt 组件？答案

【问题标题】：How can i refresh only nuxt component in Nuxt?如何仅刷新 Nuxt 中的 nuxt 组件？
【发布时间】：2021-07-30 15:00:40
【问题描述】：

我想在添加一些东西后刷新我的组件。我试试

  refresh() {
    this.$nuxt.refresh()
  }

这个但不工作这是真的

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

这是我刷新组件的想法。根据您的问题，您可以使用一些方法来实现此目标。但在我看来，有一种方法可以将key 绑定到您的组件，通过更改密钥，您的组件将刷新。

我实现了一个简单的例子来向你展示它是如何工作的：

Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({
  el: '#app',
  data: {
    component_key: 0
  },
  methods: {
    refreshComponent() {
      this.component_key += 1
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button @click="refreshComponent()">
Refresh Compoenent
</button>
  <button-counter :key="component_key" />
</div>

您可以单击上面示例中的右键，然后查看计数是否在增加。之后，当您单击Refresh Component 按钮时，您会看到组件刷新。

此外，您可以使用this.$forceUpdate() 刷新所有变量。也许它会对您的情况有所帮助，但我建议您使用 key 绑定解决方案来解决您的问题。

【讨论】：