vue 刷新组件

在 Vue 中，可以通过以下几种方式来刷新组件：

1. 使用 `v-if` 或 `v-show` 指令：可以通过改变组件的显示与隐藏来达到刷新组件的目的。例如，可以在父组件中维护一个变量，当这个变量的值改变时，子组件的显示状态也会相应地改变。

2. 使用 `key` 属性：在组件中添加 `key` 属性，每次更新组件时，改变 `key` 的值，这样 Vue 会强制重新渲染组件。例如：

   <template>
     <div :key="componentKey">
       <MyComponent />
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         componentKey: 0
       }
     },
     
     methods: {
       refreshComponent() {
         this.componentKey += 1;
       }
     }
   }
   </script>

3. 使用 `$forceUpdate()` 方法：调用组件实例的 `$forceUpdate()` 方法可以强制刷新组件。例如：

   <template>
     <div>
       <MyComponent :data="data" />
     </div>
   </template>
   
   <script>
   import MyComponent from './MyComponent.vue';
   
   export default {
     components: { MyComponent },
     
     data() {
       return {
         data: {}
       }
     },
     
     methods: {
       refreshComponent() {
         this.$forceUpdate();
       }
     }
   }
   </script>

以上是几种常见的刷新组件的方式，具体使用哪种方式取决于具体的业务场景。