自定义全局组件use使用

自定义vue全局组件

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

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

• 实现组件的功能

//Loading.vue

• 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)
})

• 在页面中使用组件