vue3引入组件

// 引入组件的方式在 Vue 3 中有多种，以下是常见的几种方式，并附带解释说明。

// 1. 局部引入组件
// 在需要使用该组件的文件中直接引入并注册

<template>
  <div>
    <!-- 使用引入的组件 -->
    <MyComponent />
  </div>
</template>

<script setup>
// 使用 script setup 语法糖引入组件
import MyComponent from './components/MyComponent.vue';
</script>

<!-- 解释：这种方式适用于局部使用组件，只需要在需要使用的文件中引入并注册即可。 -->

// 2. 全局引入组件
// 在 main.js 或 main.ts 中全局注册组件

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

// 全局注册组件
app.component('MyComponent', MyComponent);

app.mount('#app');

/* 
  解释：这种方式适用于全局使用组件，在 main.js 或 main.ts 中进行全局注册后，
  可以在任何地方直接使用该组件，无需再次引入和注册。
*/

// 3. 动态引入组件（懒加载）
// 使用动态导入语法来实现按需加载

<template>
  <div>
    <!-- 动态引入组件 -->
    <Suspense>
      <template #default>
        <component :is="MyComponent" />
      </template>
      <template #fallback>
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
// 动态引入组件
const MyComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'));
</script>

/*
  解释：这种方式适用于大型应用，可以减少初始加载时间，只有当组件真正被使用时才会加载。
*/