盘点VUE的全局组件有哪些使用姿势？

在学习全局组件之前，我们先撸个实例了解下：

import Loading from './Loading.vue' // 这个组件就不写了，大家各自发挥吧……
const Loading = {

Install: function (Vue) {
    Vue.component(“Loading”, Loading)
}

}
export default Loading;

通常我们在main.js文件里注册全局组件。

import App from './App.vue'// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Loading from '../components/loading'// 引入自定义组件（注意引用组件的路径）
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
  el: '#app',
  render: h => h(App)
})

最后在页面直接调用<loading></loading>标签就可以了。

上面这个方法应该是大家经常使用的，今天我想给大家介绍一个新的方法，也是后续如果遇到需要注册全局组件的量比较多的时候，普遍采用的一种方法（自动化全局注册组件）：

一、新建一个Js文件，global-components.js
const requireComponent = require.context( '@/components/', true,/\.(vue)$/);
1、'@/components/'// 其组件目录的相对路径
2、true// 是否查询其子目录
3、/\.(vue)$/// 匹配基础组件文件名的正则表达式
requireComponent.keys().forEach(item=> {
  const componentConfig = requireComponent(item);// 获取组件配置
// 获取组件的命名---可以根据自己项目的实际情况进行修改
const componentName = item.replace(/^\.\//, '').replace(/\/\index.vue$/, '');
// 全局注册组件，如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则会回退使用模块的根
  Vue.component(componentName,componentConfig.default || componentConfig);
});

二、在main.js中引入该文件即可（放在new Vue之前）
// 如何使用：无需引入，直接在页面中使用
<package-name><package-name/>  

补充下知识点：
1、Vue.component() // 注册或获取全局组件，注册还会自动使用给定的id设置组件的名称

说到它，就不免想到vue.extend()
// 创建一个局部组件构造器，构造器中有个选项对象，选项对象的template属性用于自定义渲染HTML。

1. 创建组件构造器

var localComponent= Vue.extend({

template: '<li>{{firstName}} {{lastName}}</li>'
    data: function() {
    firstName: “xiaohua”,
    lastName: “zhang”
}

})
new Vue({

el: '#root',
components: {
    'my-component': localComponent
}

})
在页面中使用：<local-component></local-component>