简单实现vue3注册全局组件

1.创建一个封装全局组件的js

//引入需要使用的组件
import Archive from '../components/Archive.vue'
import Home from '../components/Home.vue'

//把所有引入的组件存储在一个对象中
const allComponent = {Archive,Home}

export default {
    //必须是install这个名字的方法
    install(app){
        Object.keys(allComponent).forEach(key=>{
            //console.log(key,allComponent[key]);
            app.component(key,allComponent[key])
        })
    }
}

我创建的名字如下图：

2.全局引入使用（main.js）

import globalComponents from './utils/globalComponents'
app.use(globalComponents)

最后在页面中直接使用即可，组件的名字需要和封装的全局组件js里面引入的组件名保持一致,如下图所示：