1、先来看一段常规的组件引入和使用：
1、可copy的代码展示
// 这是引入部分
import inputC from './inputC'
export default {
components:{
inputC,
},
data () {
return {
val: {},
}
}
}
<template>
<div class="field">
<div class="inner">
<!--这是使用部分-->
<inputC :params="val"></inputC>
</div>
<div class="bottom">
<el-button type="primary" @click="update">编辑</el-button>
<el-button type="primary" @click="submit">提交</el-button>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="search2">查询2</el-button>
</div>
</div>
</template>
2、不可copy的代码截图解释：
image.png
2、接下来为动态组件、动态引入：
1、上面所展示的是最基本的操作，组件名、组件个数、组件路径确定，可按照常规步骤引入、使用。
2、下面展示当不确定组件名、组件个数、组件路径 时， 如何引入组件、如何使用组件？
3、以下为可copy的代码展示：
<template>
<div class="field list">
<component :params="childParams" :is="NextTickName"></component>
</div>
</template>
/*
*定义一个基于window对象的全局属性：componentsConfig
*此处的代码你可以放在任意你觉得方便的地方即可，放在别的js文件也可，此处为了方便就放
*这里
*/
window.componentsConfig = { //左边是key值，右边是组件的引入路径
'test1': './test1.vue',
'test2': './test2.vue',
'test3': './test3.vue',
'test4': './test4.vue',
}
// 因为不知道组件名以及路径，那么此处无法使用import语句
//import inputC from './inputC'
export default {
components:{
// inputC, //因为无法import组件，所以组件列表这里也无法配上组件名
},
data () {
return {
childParams: {},
}
},
computed:{
NextTickName: function (){
let map = window.componentsConfig;
if(this.targetComponent){
let k = this.targetComponent; // 组件映射关系key值
let p = map[k]; // 通知k值读取到路径信息
let c = () => import(`${p}`); // 动态组件
return c
}
}
},
}
4、以下为不可copy的代码截图解释：
image.png
