vue3中组件注册注意事项

最新推荐文章于 2025-10-03 22:35:54 发布

原创最新推荐文章于 2025-10-03 22:35:54 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue3中组件注册的两种主要方式：在setup语法糖中注册和非语法糖注册。包括全局注册、局部注册及异步组件注册的具体实现方法。

##首先需要注意vue3组件注册大致分两种情况，一种是在setup语法糖中注册,一种是在非语法糖注册

如上所示为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方法来注册。