vue2注册全局组件或全局引入组件库；全局引入组件后，使用报错：Unknown custom element: ＜xxx＞ - did you register the component corre

本文链接：https://blog.csdn.net/qq_45327886/article/details/128151915

如嫌繁琐，请直接看总结部分

全局注册组件或组件库：在main.js(Vue打包入口文件）中全局引入组件或组件库后，在项目的其他地方就可以直接使用被引入的组件，无需手动引入。

一、单个引入

1.需要注册的组件较少时，可以单个引入组件

1)引入组件 Vue.component(组件名称,组件)

2)引入组件库 Vue.use(组件库)

import Vue from 'vue';
import TopPatientInfo from '@/components/TopPatientInfo';
import ElementUI from 'element-ui';
Vue.component('Form',TopPatientInfo)
Vue.use(ElementUI)

二、批量引入

1.components.js：定义要注册的组件；并且通过 Vue.component和Vue.use生成具有 install方法的对象 ComponentList

import TopPatientInfo from '@/components/TopPatientInfo';
import ElementUI from 'element-ui';
import Vue from 'vue';
// 1.待注册组件
const registerComponentList = {
    TopPatientInfo: TopPatientInfo,
    ElementUI: ElementUI,
}

// 2.组装好的注册对象
export let ComponentList = {
    install() {
        for (let [itemKey, item] of Object.entries(registerComponentList)) {
            console.log(
                '正在注册组件', itemKey, item
            )
            // 组件库：已经有install方法，直接用Vue.use注册;
            if (item.install) {
                Vue.use(item)
            } 
            // 自定义组件，使用Vue.component注册
            else {
                Vue.component(itemKey, item)
            }
        }
    }
}

2.main.js---vue2打包入口文件

1）直接引入生成的带有install方法的ComponentList

2) Vue.use引入

import Vue from 'vue';
import {ComponentList} from './components.js'
Vue.use(ComponentList)

3.完整步骤

1)提供需要批量注册的组件(const定义或批量引入文件)

2)obj要有 install方法定义批量注册组件的逻辑,install方法实际也是调用Vue.component(组件名称,组件) 或 Vue.use(组件库)来注册

3)Vue.use(obj)注册

三、结果及注意事项

1.结果

在项目其他地方使用到上述代码注册的组件库 ElementUI 或组件TopatientInfo时，就无需使用import引入，在components:{}中注册。

2..Vue.component必须提供组件名称，不然会有警告：vue.esm.js?9b69:5059 [Vue warn]: Unknown custom element: <TopPatientInfo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

详细错误如下：