vue中注册全局组件

1.新建一个BreadCrumb.vue文件

<template>
  <div class="breadcrumb">
    面包屑
    {{msg}}
    <slot/> <!-- 插槽 -->
  </div>
</template>
 
<script>
export default {
  name: 'BreadCrumb',
  // 传入子组件的参数写到props
  props: {
    msg:{
        type:String,
        default:'',
    }
  }
}
</script>
 
<style scoped lang="less">
  .breadcrumb { width: 100%; font-size: 14px; }
</style>

2.新建一个index.js文件

import BreadCrumb from './BreadCrumb.vue'


// 添加install方法
// export  BreadCrumb.install = function(Vue) {
//     Vue.component(BreadCrumb.name, BreadCrumb);
//   };
const breadcrumb = {
  install:function(Vue) {
    Vue.component(BreadCrumb.name, BreadCrumb);
  }}
const components = {
  breadcrumb:breadcrumb,
}
export default components

3.在main.js中注册

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import components from '@/views/index.js'//引用全局组件Button
 
Vue.use(components.breadcrumb);//使用全局组件BreadCrumb
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')