解决每个组件里面引入子组件问题

大家想一下一个场景
我们有一个组件，但是它里面有用到了别的组件
那我们常用的办法就是

<script>
  import  child form '...'
  export default {
      components: {
          child,
          }
     }
</script>

上面的大家应该都是会的，就不赘述了

但是在做项目的时候我们会有很多的组件里面包含子组件，这个时候我们就需要在每个组件里面做一次上面的操作，感觉就是很繁琐。

下面我们就讲一下如何避免上面的繁琐操作，又同样能达到目的

下面我就以vue-cli为架子说我是怎么操作的
第一步.首先在components下面新建一个js文件，我把它命名为quoteComponents.js

//quoteComponents.js
import Vue from 'vue'
/*
*  转换组件名首字母大写
*/
function capitalizeFirstLetter(string) {
      return  string.charAt(0).toUpperCase() + string.slice(1);
}
/* webpack神器的require.context()方法
*   require.context(param1,param2,param3)方法来创建自己的（模块）上下文，从而实现自动动态require组件
 *  param1        表示从哪个文件下面加载组件
 *  param2        表示是否从param1下面的子文件下面加载组件
 *  param3        表示一个匹配文件的正则表达式
*/
const requireComponent = require.context(
  './page', false, /\.vue$/
  //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

第二步 在mian.js里面下面引入上面的js,具体路径以自己实际路径为准

 //main.js
  import './components/global.js'

第三步 使用
比如我有一个父组件father.vue,一个组件child.vue

//child.vue
<template>
  <div>
     我是子组件
  
  </div>
</template>

//father.vue
   <div>
        我是父组件
      //注意下面的组件名要大写
      <Child></Child>
    </div>

ok大功告成