vue 动态加载组件

作者：刎心封爱为伱锁情发布日期:2025-09-07 浏览:123

// Vue 动态加载组件示例

// 1. 使用 import() 动态导入组件
const AsyncComponent = () => import('./components/MyComponent.vue');

// 2. 在 Vue 组件中使用动态加载的组件
new Vue({
  el: '#app',
  components: {
    // 注册动态加载的组件
    AsyncComponent
  },
  template: `
    <div>
      <!-- 使用动态加载的组件 -->
      <async-component></async-component>
    </div>
  `
});

// 解释说明：
// - `import()` 函数用于动态加载组件，它返回一个 Promise，当组件加载完成后会自动解析。
// - `AsyncComponent` 是一个函数，返回一个 Promise，当组件需要渲染时才会触发加载。
// - 在 `components` 中注册动态加载的组件后，可以直接在模板中使用该组件。
// - 这种方式可以实现按需加载，提升应用的性能，特别是在大型应用中，可以减少初始加载时间。

上一篇：vue3 canvas

下一篇：vue2 监听