vue 页面引用多个组价的引入方式的优化

<template>
  <div>
    <Demo1></Demo1>
    <Demo2></Demo2>
    <Demo3></Demo3>
  </div>
</template>
<script>
// import Demo1 from '../components/home/Demo1.vue'
// import Demo2 from '../components/home/Demo2.vue'
// import Demo3 from '../components/home/Demo3.vue'

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
// components:{Demo1,Demo2,Demo3},
  components: modules,
  data () {
    return {
      list: ['张三', '李四']
    }
  },
  methods: {
    // 修改用户名称
    handleChangeName () {
      this.list[0] = '王五'
    }
  }
}
</script>

先前我们假如想在一个页面引入多个组件，需要使用多个import,然后在components：{}去注册，

如果想改变这个样的方式，我们可以使用require.context()方法，然后就能直接使用指定文件夹下面的所有的组件了。