vue3 注册组件

开发好组件后,我们需要使用组件就需要注册组件,我们可以根据自己的使用情况进行局部注册组件全局注册组件自动注册组件,本文将演示setup apioptions 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'});