require.context()+vue内置组件component使用

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

例如：一个页面按钮太多，调用组件太多。我们可以使用require.context()和vue内置组件component

index.js

const r = require.context('@/components/ModelCom', true, /\.vue$/);
let obj = {}
let arr=[]
r.keys().forEach(ele=>{
    console.log(ele)
    let fileName = r(ele).default.name
    obj[fileName] = r(ele).default
    arr.push(fileName)
})
//上面的写法，大致意思相当于import引入所有相关组件


export default {
    title:'客户列表',
    name:'customerList',
    components: obj,//注册所有相关组件
    data () {
        return {
            comList:arr
        }
    }
}

index.vue

<template>
    <div class='table_com'>  
      <component class='btns' v-for="(item,index) in comList" :key='index' :is='item'></component>
      <!-- 上面写法  相当于下面这段话 -->
      <!-- <top-customer-modal></top-customer-modal>
      <business-info-modal></business-info-modal>
      <customer-editname></customer-editname> -->
    </div>
</template>
<script src='./index.js'></script>