[JavaScript知识库]Vue 全局组件注册两种方法 component 与use

1.component 定义全局组件

在main.js 文件中映入组件并全局注册组件

格式：

Vue.component(‘组件名’， 组件对象)

基本示例-定义全局组件:

import Vue from 'vue' // 主要的Vue
//import 自定义组件名 from '组件地址'
import PageTools from '@/components/PageTools' // 导入需要注册的组件
Vue.component('PageTools', PageTools) // 全局注册组件

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用全局组件：

 <!-- 全局组件直接输入自定义的标签名直接使用 -->
<PageTools></PageTools>

2.use注册全局组件

官方解释用法：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

平时使用就有用过use：

1. Vue.use(VueRouter)
2. Vue.use(Vuex)
3. Vue.use(vant)
4. Vue.use(ElementUI)

格式：

Vue.use(obj)

?说明:
??1. Vue.use 可以接收一个对象，Vue.use(obj)
??2. 对象obj中需要提供一个 install 函数
??3. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

（1）在main.js中-install的参数及执行：

??像VueRouter，Vuex 这些插件都是内部进行封装了的，所以直接可以use进行全局注册

const MyPlugin = {
	install(Vue) {
		console.log('install.....', Vue) 
   		Vue.component('PageTools', PageTools) // 全局注册组件
  }
}
Vue.use(MyPlugin)

（2）提供统一注册的入口文件 ：
??在上面看来貌似 use 注册组件更加复杂了；诶！当要全局注册的组件有十几二十个use就用上了，把use需要的obj对象给他拎出来。

1. 注册全局入口文件 （我这里就是在： src/componets/index.js ）

//这里是use全局入口文件
import PageTools from './PageTools'  // 导入PageTools组件
import NavBar from './NavBar'  // 导入PageTools组件
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools) // 注册组件
    Vue.component('NavBar ', NavBar) // 注册组件
  }
}

2. .在main.js中注册插件

import Components from './components' // 导入全局入口文件
Vue.use(Components) // 注册全局入口文件里的全部组件

注：其实elementUI的全局引入方法就是相同的逻辑