vue实践---vue动态加载组件

开发中遇到要加载10个或者更多的，类型相同的组件时，如果用普通的 import 引入组件，components注册组件，代码显得太啰嗦了，这时候就需要用到 require.context 动态加载这些组件，然后用循环的方式引用。

这里以三个组件为例： Bus.vue  Car.vue Train.vue。

第一步

在相同目录下新建index.js文件，如下：

第二步

index.js内容如下：

const resultComps = {}
let requireComponent = require.context(
    './', // 在当前目录下查找
    false, // 不遍历子文件夹
    /\.vue$/ // 正则匹配 以 .vue结尾的文件
  )
  requireComponent.keys().forEach(fileName => {
    let comp = requireComponent(fileName)
    resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
  })
  export default resultComps

resultComps 最终的结果是一个对象，如下：

key是 组件的名字，value就是组件。

第三步

使用方法如下：

<template>
  <div id="app">
    <component
      v-for="comp in comps"
      :key="comp.id"
      :is="allComps[comp]">
    </component>
  </div>
</template>

<script>
import allComps from './components/vehicle'
export default {
  name: 'app',
  data () {
    return {
      comps: ['Bus', 'Car', 'Train'],
      allComps: allComps
    }
  }
}
</script>

具体的代码看这里： https://github.com/YalongYan/vue-practice/tree/master/dynamic-loading-component

vue实践系列请看这里： https://github.com/YalongYan/vue-practice