vue3 注册组件

开发好组件后，我们使用组件就需要注册组件，我们可以根据自己的使用情况进行局部注册组件、全局注册组件、自动注册组件,本文将演示setup api和options api两种模式下如果注册组件。

Setup 全局或局部注册

如果你参与开发的系统自定义组件很多，一个一个在main.js注册的话,main.js文件就会变的很臃肿，可以参考下面的代码在自定义组件文件夹内完成注册。

<!-- 第一种： setup 局部注册组件sku  -->
<template>
    <sku/> 
</template>
<script setup>
  import { reactive, ref ,onMounted} from "vue";
  //导入即可使用 sku 名称你可以随便取
  import sku  from "./exposeSetup.vue";
</script>

<!-- 第二种： 全局注册组件 -->
<!-- 第1步 在components文件夹下新建index.js -->
import sku from './exposeSetup.vue'
import solts from './solts.vue'
 
export default function install(app){
    //注册组件sku
    app.component('sku',sku);
    //注册组件solts
    app.component('solts',solts);
}
<!-- 第2步 在main.js -->
import { createApp } from 'vue'
import App from './App.vue'
//导入index.js文件
import components from './components/index' 
createApp(App).use(components).mount('#app');

Setup 自动注册组件

//文件目录结构
|- src
    |- main.js
    |- components
        |- index.js
        |- i-sku
            |- index.js
            |- src
                |- index.vue
                |- index.less
        |- i-button 
            |- index.js
            |- src
                |- index.vue
                |- index.less 

// ********** main.js **********            
import { createApp } from 'vue'
import App from './App.vue'
//导入index.js文件
import components from './components/index.js';
createApp(App).use(components).mount('#app');

//********** components/index.js ********** 
//vite中自动注册的方法
export default {
    install(app) {
        const components = import.meta.globEager('./*/index.js')
        for (const [key, val,alias] of Object.entries(components)) {
            //const componentName = key.split('/')[1];
            //val.default.alias 是在 i-sku组件里面 index.js 里自定义的组件名称
            app.component(val.default.alias, val.default);
        }
    }
}
//webpack中自动注册的方法
// export default {
//     install(app) {
//       const comps = require.context('./', true, /index\.vue$/)
//       comps.keys().forEach((key) => {
//         const compName = key.split('/')[1];
//         app.component(compName, comps(key).default)
//       })
//     }
//   } 
 
//********** components/src/i-button/index.js ********** 
import comp  from "./src/index.vue";
export default Object.assign(comp,{alias:'i-button'});