vue自定义全局组件(或自定义插件)

最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法。

下面就利用这个install来写一个自己的插件。

目录路径如下：

在该目录下，1个index.js和1个组件loading.vue，index.js里面写的是关于loading.vue的install方法。

index.js 代码如下所示：

import LoadingComponent from './Loading.vue'

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

export default Loading
复制代码

install方法表示在main.js中，如果使用Vue.use()方法的话，则该方法默认会调用install方法。在install方法里面还注册了组件，这里面'Loading'指的是外面App.vue使用的组件名，LoadingComponent指的是上面引过来的Loading.vue。之后通过export default Loading导出。

Loading.vue代码如下所示:

<template>
	<div class="loading-box">
		Loading...
	</div>
</template>
<script></script>
复制代码

main.js里面如何下：

import Vue from 'vue'
import Loading from 'components/loading'

Vue.use(Loading)
复制代码

App.vue方法里面使用该模板就可以了：

<template>
  <div id="app">
    <Loading></Loading>
  </div>
</template>
复制代码

转载于:https://juejin.im/post/5b23763cf265da59bf79f3eb