vue动态组件动态引入

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