批量注册vue局部组件

昨天突然收到通知，说要做一个支付的后台管理系统，其中有一部分是要设置各种支付的配置参数，每种支付方式的配置参数都是不一样的，所以其实是可以看成一个个单独的组件，然后组合成一个页面了。

1. 最基础的自然是依次导入各个子组件，然后在 components 属性中进行声明，之后才能在模板中进行使用，再进行各种参数的绑定。
2. 但是这么做的话，毫无疑问很麻烦，而且也不利于以后的扩展，万一以后支付方式变多了呢？
3. 好在vue有一个 component 组件，可以使用动态组件，如果使用循环的话，在模板中就省下了重复书写的麻烦。 这部分的实现代码为：

// msgs.js
var pays = [{
  title: 'JSAPI支付',
  field: 'jssdkPay',
}, {
  title: '微信APP支付',
  field: 'wcAppPay',
}, {
  title: '支付宝APP支付',
  field: 'aliAppPay',
}];

var payArr = pays.map(v => v.field);

export {
  pays, payArr,
}

// setting.vue
<MySection
    v-for="pay in pays"
    :key="pay.title"
    :title="pay.title"
    :open.sync="pay.open">
    <component :is="pay.field" :id="id" :obj="pay" />
</MySection>

4. 现在还有个问题就是，局部组件还是得一个个导入，然后一个个声明。作为一个程序员，我们怎么能只是复制粘贴呢？（说白了其实还是我比较懒，哈哈）。这时候我想起vue的官方文档有说过 基础组件的自动化全局注册 ,仔细一看代码，稍加改造不就能实现 批量注册vue局部组件 了吗？

<script>  
const requireComponent = require.context('./components/pay', false, /\w+\.(vue|js)$/);

var cmps = {};

requireComponent.keys().map(fileName => {
  let cmp = requireComponent(fileName).default;
  cmps[cmp.name] = cmp;
});

export default {
    name: 'setting',
    components: cmps,
    // 其他部分
}
</script>