Vue巧妙引入组件

组件引入方式

mode 一、

1、引入组件

import ComponentName from 'path'  // path 代表组件所在路径

2、components挂载组件

components: {
ComponentName,
},

3、template模板引入

<component-name />

mode 二、

新建js文件,此处我取名为index.js，在index.js文件中进行如下操作

import ComponentName from 'path'  // path 表示组件所在路径
const components=[ComponentName]
const CmpUI = {
    install(Vue) {
        components.forEach((component) => {
            // Vue实例上注册组件，(component.name, component)两个参数
            // 要求每个自定义必须给name属性
            Vue.component(component.name, component)
        })
    },
}
export default CmpUI

main.js中引入上面提到的index.js文件

import CmpUI from 'path'  // path表示index.js所在路径
Vue.use(CmpUI)