vue3中組件注冊注意事項


首先需要注意vue3組件注冊大致分兩種情況,一種是在setup語法糖中注冊,一種是在非語法糖注冊

image
如上所示為setup語法糖中使用組件,只需要import引入組件即可,不需要注冊(語法糖可是非常強大nice的哈)

第二種情況就是非語法糖中的使用了

1、使用defineComponent

defineComponent
//全局注冊
main.js
import {createApp} from 'vue';
import listviewTopVue from '@/components/listviewTop.vue';
import App from './App.vue';
const app = createApp(App);
app.component('listview-top-vue',listviewTopVue);
app.mount('#app');
至此可以在任何地方使用該組件

//局部注冊
important {defineComponent} from 'vue';
import listviewTopVue from '@/components/listviewTop.vue';
export default defineComponent({
name:'App',
components:{
listviewTopVue
}
})

2、使用異步注冊組件

import {defineComponent,defineAsyncComponent} from 'vue';
export defalut defineComponent({
name:'App',
components:{
listviewTopVue:defineAsyncComponent(()=>import('./components/listviewTop.vue'))
}
})

總結:推薦使用setup語法糖,簡單直接高效,強大,當然習慣了vue2語法寫法的朋友們也可以使用vue2方法來注冊。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM