Vue3注册组件方式总结

composition模式

<template>
    <ChildCom />
</template>
<script setup>
// setup默认就注册了组件
import ChildCom from './components/ChildCom.vue'
</script>

options模式

<template>
    <ChildCom />
</template>
<script>
import ChildCom from './components/ChildCom.vue'
export default {
    components: {
        ChildCom
    }
}
</script>

全局模式

import {createApp} from 'vue'
import App from './App'
// 引入组件
import ChildCom from './ChildCom'
const app = createApp(App)
// 注册
app.component('ChildCom', ChildCom)
​
// 挂载,这一行一定要放在最后面，因为这是挂载到入口文件index.html里面的<div id="app"></div>
app.mount('#app')

批量注册全局组件

方法1

// /utils/global.js
export default {
  install(app) {
    /**
     * glob(components, obj)
     * 参数1是组件所在地址
     * 参数2不传就是组件懒加载，也可能你只想要导入模块中的部分内容{ import: 'setup' }，导入组件的部分setup下面的内容
     * 文档参考：https://cn.vitejs.dev/guide/features.html#glob-import
     */
    const module = import.meta.glob('@/components/*.vue', { eager: true })
    for (let iterator in module) {
      const componentName = iterator.slice(iterator.lastIndexOf('/') + 1).split('.')[0]
      // console.log(iterator,module[iterator], module[iterator].default, componentName);
      app.component(componentName,module[iterator].default)
    }
  }
}

方法2

// /utils/global.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
// 把想注册的全局组件加入到这个对象里面
const allGloablComponent = { SvgIcon }
export default {
  //务必叫做install方法
  install(app) {
    //将element-plus提供图标注册为全局组件
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
    // 注册项目全部的全局组件
    Object.keys(allGloablComponent).forEach(file => {
      // 注册为全局组件
      app.component(file, allGloablComponent[file])
    })
    // 获取vue版本号
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')
    }
  },
}

在main.js

import {createApp} from 'vue'
import App from './App'
// 引入文件
import global from './utils/global'
const app = createApp(App)
app.use(global)
// 挂载,这一行一定要放在最后面，因为这是挂载到入口文件index.html里面的<div id="app"></div>
app.mount('#app')