Vue动态组件加载与切换实例

本示例演示如何在Vue中通过动态组件实现组件的异步加载与切换，提升页面性能。通过异步加载，可以在需要时动态加载组件，减小初始页面加载体积。

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="loadComponent">加载新组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: null,
    };
  },
  methods: {
    async loadComponent() {
      // 异步加载组件
      const { default: newComponent } = await import('./NewComponent.vue');
      this.currentComponent = newComponent;
    },
  },
};
</script>

<!-- NewComponent.vue -->
<template>
  <div>
    <p>这是新组件的内容</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('新组件已加载');
  },
};
</script>

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com