Vue-注册全局组件插件的两种方法

Vue.use()注册与Vue.component()注册区别就在于一个insatll方法

1，Vue.component() 只能注册一个组件，里面接收两个参数：第一个参数是自定义元素名称，也就是在页面中使用的这个组件的标签名称；

第一种：在main.js中直接注册
// 引入
import PageTools from '@/components/PageTools'
// 注册为全局组件
Vue.component('PageTools', PageTools)

2，Vue.use()  可以一次性注册多个自定义组件；当我们需要进行多个组件的注册时候,假如说都写到main.js里面的话,这样就会造成main.js文件的臃肿与杂乱；所以可以使用Vue.use() 进行注册；

例子：（项目结构：）

第一步：在components 文件中新建两个组件 comA.vue,   comB.vue  ,

 第二步：utils 文件夹中新建useComponent.js 文件

 该文件中引入需要注册的组件；并通过 install 方法导出，方法名字必须叫这个；

import comA from '@/components/demo/comA'
import comB from '@/components/demo/comB'
// 当我们需要进行多个组件的注册时候, 假如说都写到main.js里面的话, 
// 这样就会造成main.js文件的臃肿与杂乱
export default {
  install(Vue) {
    Vue.component('comA', comA);
    Vue.component('comB', comB);
  }
}

 第三步：在main.js 文件中，引入useComponent文件，使用Vue.use() 进行注册插件; 页面中使用<comA></comA>  即可

// 引入useComponent文件，进行注册插件，可以一次注册多个
import useComponent from './utils/useComponent'
Vue.use(useComponent)