【Vue3】局部组件和全局组件

1. 局部组件

Card.vue

<template><div class="card"><header><div>标题</div><div>副标题</div></header><section>内容</section></div>
</template><script setup lang="ts"></script><style lang="less" scoped>
@border: #ccc;
.card {border: 1px solid @border;width: 400px;header {display: flex;justify-content: space-between;padding: 5px;border-bottom: 1px solid @border;}section{padding: 5px;min-height: 300px;}
}
</style>

App.vue

<template><div><CardVue></CardVue></div>
</template><script setup lang="ts">
import CardVue from './components/Card.vue'</script><style lang="scss" scoped></style>

2. 全局组件

2.1 注册单个全局组件

Cardvue

// 同上

App.vue

<template><div><Card></Card></div>
</template><script setup lang="ts">
</script><style lang="scss" scoped></style>

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import CardVue from './components/Card.vue'
export const app = createApp(App)
app.component('Card', CardVue)
app.mount('#app')

2.2 批量注册全局组件

Card.vue

// 同上

Tree.vue

<template><div><h1>this is a title</h1></div>
</template><script setup lang="ts">
</script><style lang="scss" scoped>
h1 {border: 1px solid black;
}
</style>

App.vue

<template><div><Card></Card><Tree></Tree></div>
</template><script setup lang="ts">
</script><style lang="scss" scoped></style>

main.ts

import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'
const app = createApp(App)
const componentNames = ['Card', 'Tree'];
// 使用动态导入的方式注册全局组件时需要注意异步组件的加载
// 异步组件使用 defineAsyncComponent 方法来处理动态导入的组件，并且使用 await 关键字等待组件的加载完成。在组件加载完成后，再将其注册为全局组件。
// 如果没有注意异步组件的加载，会报 Invalid VNode type: undefined (undefined) 的问题
async function registerComponents() {for (const componentName of componentNames) {// 使用 defineAsyncComponent 方法动态导入异步组件const component = await defineAsyncComponent(() => import(`./components/${componentName}.vue`));app.component(componentName, component);}app.mount('#app');
}
registerComponents();