自定義vue全局組件
項(xiàng)目源碼: https://github.com/yanghanbin-sz/custom-global-components
一般組件的文件結(jié)構(gòu)
組件文件夾
|- index.js 提供install方法(默認(rèn)加載index.js)
|- 組件.vue
|- 圖片,樣式等實(shí)現(xiàn)組件的功能
//Loading.vue
<template>
<div class="loading-box">
{{text}}
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: 'Loading...'
}
}
}
</script>
- index.js中需要提供install方法
//index.js
import LoadingComonent from './Loading.vue';
export default {
install(Vue) {
Vue.component('Loading', LoadingComonent);
}
}
- 使用Vue.use來加載全局自定義組件
// main.js
import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading' // 默認(rèn)加載index.js
Vue.use(Loading);
new Vue({
el: '#app',
render: h => h(App)
})
- 在頁面中使用組件
<template>
<div id="app">
{{msg}}
<Loading :text="'加載中...'"></Loading>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
a {
color: #42b983;
}
</style>
