动态引用组件 ＜component :is=“componentName“ /＞

在工作中常常会引用很多组件，如：

import com1 from '@/components/com1'

import com2 from '@/components/com2'

import com3 from '@/components/com3'

....

然后节点

<com1 />

<com2 />

<com2 />

代码臃肿不说，而且不灵活

使用动态组件来解决

<component :is="componentFun" />

methods: {

componentFun(){

        // 此处可以灵活传组件路径名为值，做到用什么就传什么

        let com1 = 'components/com1'

        return require('@/' +com1 ).default

}

}

也可使用for

<template>

        <div v-for(item,index) in list :key="index">

                <component :is="componentFun(item)" />

        </div>

</template>

methods: {

componentFun(item){

        // 此处可以灵活传组件路径名为值，做到用什么就传什么

        let com1 = item.components; // 'components/com1'

        return require('@/' +com1 ).default

}

}