vue刷新组件

<template>
  <div>
    <button @click="refreshComponent">刷新组件</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent',
      key: 0
    };
  },
  methods: {
    refreshComponent() {
      this.key += 1;
    }
  },
  computed: {
    ComponentToRender() {
      return () => import(`@/components/${this.currentComponent}.vue`);
    }
  }
};
</script>

解释说明：

1. 模板部分：

   • 一个按钮用于触发组件刷新。
   • 使用 <component :is="currentComponent" /> 动态渲染组件。

2. 脚本部分：

   • data 中定义了 currentComponent 和 key。currentComponent 是要渲染的组件名称，key 用于强制刷新组件。
   • methods 中定义了 refreshComponent 方法，每次点击按钮时增加 key 的值。
   • computed 中定义了 ComponentToRender，使用动态导入 (import) 来加载组件。

3. 刷新机制：

   • 每次点击按钮时，key 增加，Vue 会重新创建组件实例，从而实现组件的刷新。

如果需要更复杂的刷新逻辑或不同的刷新方式，可以根据具体需求调整代码。