vue中自定義組件(插件)
阿新 • • 發佈:2018-04-08
comment tty index all target mark cal ali lan
vue中自定義組件(插件)
原創 2017年01月04日 22:46:43在vue項目中,可以自定義組件像vue-resource一樣使用Vue.use()方法來使用,具體實現方法:
1、首先建一個自定義組件的文件夾,比如叫loading,裏面有一個index.js,還有一個自定義組件loading.vue,在這個loading.vue裏面就是這個組件的具體的內容,比如:
<template>
<div>
loading..............
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
font-size:40px;
color:#f60;
text-align:center;
}
</style>
在index.js中,規定了使用這個組件的名字,以及使用方法,如:
import loadingComponent from ‘./loading.vue‘
const loading={
install:function(Vue){
Vue.component(‘Loading‘,loadingComponent)
} //‘Loading‘這就是後面可以使用的組件的名字,install是默認的一個方法
};
export default loading;
只要在index.js中規定了install方法,就可以像一些公共的插件一樣使用Vue.use()來使用,如:
import loading from ‘./loading‘
Vue.use(loading)
這是在入口文件中引入的方法,可以看到就像vue-resource一樣,可以在項目中的任何地方使用自定義的組件了,比如在home.vue中使用
<template>
<div>
<Loading></Loading>
</div>
</template>
這樣就可以使用成功
vue中自定義組件(插件)