Vue3中局部组件和全局组件的使用教程详解
作者:谢尔登
这篇文章主要为大家学习介绍了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 注册单个全局组件
Card.vue
同上
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();
到此这篇关于Vue3中局部组件和全局组件的使用教程详解的文章就介绍到这了,更多相关Vue3组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!