Vue3中局部組件和全局組件的使用教程詳解
更新時間:2023年07月30日 15:38:09 作者:謝爾登
這篇文章主要為大家學習介紹了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']; // 使用動態(tài)導入的方式注冊全局組件時需要注意異步組件的加載 // 異步組件使用 defineAsyncComponent 方法來處理動態(tài)導入的組件,并且使用 await 關鍵字等待組件的加載完成。在組件加載完成后,再將其注冊為全局組件。 // 如果沒有注意異步組件的加載,會報 Invalid VNode type: undefined (undefined) 的問題 async function registerComponents() { for (const componentName of componentNames) { // 使用 defineAsyncComponent 方法動態(tài)導入異步組件 const component = await defineAsyncComponent(() => import(`./components/${componentName}.vue`)); app.component(componentName, component); } app.mount('#app'); } registerComponents();
到此這篇關于Vue3中局部組件和全局組件的使用教程詳解的文章就介紹到這了,更多相關Vue3組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果
使用postgres(postgis)數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動,需要的朋友可以參考下2024-05-05element validate驗證函數(shù)不執(zhí)行的原因分析
這篇文章主要介紹了element validate驗證函數(shù)不執(zhí)行的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04vue項目打包部署到nginx后css樣式失效的問題及解決方法
我將自己的前端Vue項目,經過build生成的dist文件夾copy到nginx的html文件夾中,然后寫了配置文件,運行訪問后發(fā)現(xiàn)頁面css樣式沒有加載到,下面給大家介紹vue項目打包部署到nginx后css樣式失效的問題及解決方法,感興趣的朋友一起看看吧2024-12-12element-plus?el-form表單驗證使用方法以及注意事項
這篇文章主要給大家介紹了關于element-plus?el-form表單驗證使用方法以及注意事項的相關資料,表單驗證能通過設置驗證規(guī)則驗證用戶的輸入,并對不規(guī)范的輸入做出對應提示,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12