盘点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$/, '');  //获取组件的命名---可以根据自己项目的实际情况进行修改
    Vue.component(componentName, componentConfig.default || componentConfig);  //全局注册组件（如果这个组件选项是通过 `export default`      导出的，那么就会优先使用 `.default`，否则会回退使用模块的根）
});
二、在main.js中引入该文件即可（放在new Vue之前）
<package-name><package-name/>//如何使用：无需引入，直接在页面中使用

补充下知识点：

1、Vue.component() //注册或获取全局组件，注册还会自动使用给定的id设置组件的名称，说到它，就不免想到vue.extend() //创建一个局部组件构造器，构造器中有个选项对象，选项对象的template属性用于自定义渲染HTML。

1.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>