应用

<template>
	<div class="contain">
    	<component :is="curComponent[0]" :ref="curComponent[1]"></component>
    </div>
</template>
<script>
	// 注意这里不再直接引入组件，而是引入映射关系
    import map from './components/common.js'
    export default {
        data() {
            return {
                key: '', //这里的key用于区分不同的组件,只需动态变化key值，对应的组件由计算属性自动引入
            }
        },
        computed: {
            curComponent() {
                let k = this.key + 'info' // 组件映射关系标志
                let p = map[k] // 组件相对路径
                let c = () => import(`${p}`) // 动态组件
                let r = this.key + 'Ref' // ref
                return [c, r]
            }
        }
    }
</script>

common.js

export default {
    'key1-info': './components/com1/com1.vue',
    'key2-info': './components/com2/com2.vue',
}