vue 如何重新加载组件

在Vue中重新加载组件可以通过以下几种方式实现：

1. 使用 `key` 属性：在组件的根元素上添加 `key` 属性，并在需要重新加载组件时修改 `key` 的值。这会触发组件的销毁和重新渲染，达到重新加载的效果。

<template>
  <div>
    <component :is="currentComponent" :key="componentKey"></component>
    <button @click="reloadComponent">重新加载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent',
      componentKey: 1,
    };
  },
  methods: {
    reloadComponent() {
      this.componentKey += 1;
    },
  },
};
</script>

2. 使用动态组件：将需要重新加载的组件包裹在 `<keep-alive>` 标签中，并使用动态组件进行渲染。当触发重新加载时，可以通过更改动态组件的 `component` 属性来重新加载组件。

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="reloadComponent">重新加载</button>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      currentComponent: MyComponent,
    };
  },
  methods: {
    reloadComponent() {
      this.currentComponent = null;
      this.$nextTick(() => {
        this.currentComponent = MyComponent;
      });
    },
  },
};
</script>

以上两种方式都可以实现重新加载组件的效果，具体选择哪种方式取决于你的具体需求和场景。