vue 注册全局组件

在学习自定义封装better-scroll组件后，想对该主键其进行全局注册。在平常开发中基本都用的别人封装好的组件，想到全局注册，自然而然就想到Vue.use()，于是在main.js中进行了配置

结果报错了：

开始以为是自定义的组件有问题，直接局部注册引用该组件，结果没有报错。于是就自我怀疑一番在网上查找全局注册的方法，很多答案也是说使用Vue.use,最终看到了一个指令Vue.compontent(),一看compontent组件，于是就尝试了一下，果然成功了。

import BetterScroll from './components/BetterScroll'

Vue.component('BetterScroll', BetterScroll)

后来网上搜索了一下这两个指令对比，Vue.use()是全局注册插件 ，Vue.component()是全局注册组件。但是为什么会出现进行全局注册组件也使用到了use,而且成功了，自己写的组件会报错呢？

后来看到一篇文章Vue.use自定义自己的全局组件，里面提到了自定义好组件后，对组件又进行了封装，封装成了插件，在方法中通过Vue.component对自定义的组件进行了全局注册。

封装插件

import MyLoading from './Loading.vue'

// 这里是重点

const Loading = {

    install: function(Vue){

        Vue.component('Loading',MyLoading)

    }

}

// 导出组件

export default Loading

注册组件

import Vue from 'vue'

import App from './App.vue'

// 引入element-ui组件

import ElementUi from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

// 引入自定义组件。index.js是组件的默认入口

import Loading from '../components/loading'

Vue.use(Loading);

Vue.use(ElementUi);

new Vue({

  el: '#app',

  render: h => h(App)

})