vue-全局注册公共组件

1.在 main.js 中

// 挂载全局组件
import plugin from '@/components'
Vue.use(plugin)

2. 在 components文件下 index.js中

// 作用 : 在 components文件下创建的 .vue 文件会自动注册

// 注册公共组件,在main.js里面引用
export default {
  install(Vue) {
 // const requireComponent = require.context(文件路径，是否深层次查找Bool，正则 .vue)
    const requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach(item => {
      const moduleObj = requireComponent(item).default
      Vue.component(moduleObj.name, moduleObj)
    })
  }
}

3. 注意:

在 components文件下的 Header 公共组件里面要配置 name

<template>
  <div>
    <h1>我是公共组件</h1>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data() {
    return {
    }
  },
}
</script>

4. 在业务组件中使用公共组件

<template>
  <div>
    <Header />   //直接使用
  </div>
</template>

<script>
// import Header from '@/components/Header/index.vue'
export default {
  name: '',
 // components: { Header },
  data() {
    return {}
  }
}
</script>