Vue的全局组件

Vue是一个组件化开发的框架，一般我们在项目中使用组件的步骤是这样的。

1.创建一个组件：

比方说我们现在新建一个demo.vue文件，随便写一行代码。

  <template>
    <div>
        <h1>{{msg}}</h1>    
    </div>    
</template>

<script>
export default {
    data() {
        return {
            msg:'只是新创建的一个组件'
        }
    }
}
</script>

2.使用组件

在我们需要使用组件的地方，引入之前写好的组件，并通过components绑定，就可以直接使用了。

<template>
  <div id="app">
    <demo></demo>
  </div>
</template>

<script>
import demo from './components/demo/demo.vue'
export default {
 components: {
  demo //等价与demo:demo,es6语法
 }
}
</script>

从上述的例子可以看出，我们使用组件，需要经过引入，绑定两个步骤。那么，如果我们需要使用一些全局组件或者第三方的组件库怎么办呢？

比如我们要用一些第三方的组件库（以element-ui为例），当然最简单的办法就是直接引用，在idnex.html上或者是我们需要的页面，直接通过link引入。

截于elemrnt-ui官网

官网还提供了另一种引入方式（在引用之前需要使用npm安装一下）。

截于elemrnt-ui官网

而且还可以按需引入。（按需引入需要安装 babel-plugin-component）

现在我们知道了使用组件，有两种方式。一种是引入文件，通过components绑定来使用。另一是引入文件，通过Vue.use()来使用。

那么自己写的组件，如何通过vue.use()来使用呢？

1.先创建一个组件

<template>
    <div>
        {{msg}}
    </div>    
</template>
<script>
export default {
    data() {
        return {
            msg:'loading......'
        }
    }
}
</script>

2.在组件的同级目录下，再创建一个idnex.js文件(名字可以随便起)

import LoadingComponents from './loading.vue';

const loading = {
    install:function(Vue) {
        Vue.component('Loading', LoadingComponents)
    }
}

export default loading;

3.引入自定义组件，并使用

import Vue from 'vue'
import App from './App.vue'
import loading from './components/loading/'

Vue.use(loading);

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

现在就可以在任何地方，直接使用自定义的组件。