自定义vue全局组件

项目源码: https://github.com/yanghanbin-sz/custom-global-components

• 一般组件的文件结构
  组件文件夹
  |- index.js 提供install方法(默认加载index.js)
  |- 组件.vue
  |- 图片,样式等

• 实现组件的功能

//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' // 默认加载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>