在vue項目中,我們可以自定義元件,像element-ui一樣使用Vue.use()方法來使用,具體實作方法:
1.首先建立一個Cmponent.vue檔案
// Cmponent.vue
<template>
<div>
我是元件
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
font-size:40px;
color:#fbb;
text-align:center;
}
</style>
2.其次在同一目錄下建立index.js檔案,在這個檔案中使用install方法來全局注冊該元件
import component from './Cmponent.vue'
const component = {
install:function(Vue){
Vue.component('component-name',component)
} //'component-name'這就是後面可以使用的元件的名字,install是預設的一個方法
}
// 導出該元件
export default component
// 隻要在index.js裡規定了install方法,就可以向其他ui元件庫那樣,使用Vue.use()來全局使用
import loading from './index.js'
Vue.use(loading)
<template>
<div>
<component-name></component-name>
</div>
</template>