vue自定義全域性元件(或自定義外掛)

洲哥發表於2018-06-15
Vue元件

最近研究element-ui和axios的時候，發現他們是自定義元件，但是唯一有一點不同的是，在用element-ui的時候是使用Vue.use()語句來使用的，而axios的時候，不用Vue.use()，只要import就可以匯入進來了，感覺很神奇，細細的發現，原來他們的不同是因為axios裡面並沒有寫install方法，而element-ui就有寫這個方法。

下面就利用這個install來寫一個自己的外掛。
目錄路徑如下：

vue自定義全域性元件(或自定義外掛)

在該目錄下，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>
複製程式碼

相關文章