Vue动态组件实现异步加载

本示例演示如何使用Vue的动态组件实现异步加载，提高页面性能。通过异步加载，可按需加载组件，减小初始页面加载体积。

<template>
  <div>
    <component :is="currentComponent" @loaded="handleComponentLoaded" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: null,
    };
  },
  methods: {
    async loadComponentAsync() {
      // 模拟异步加载组件
      const componentModule = await import('./AsyncComponent.vue');
      this.currentComponent = componentModule.default;
      this.$emit('loaded');
    },
    handleComponentLoaded() {
      console.log('组件加载完成');
    },
  },
  mounted() {
    this.loadComponentAsync();
  },
};
</script>

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