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