vue动态引入（按需引入）组件并传值

需求 就是有一个组件库，需要根据接口所传的组件类型按需引入生成页面

//模板，用vue内置组件component实现，:is绑定不同的组件(可以是一个数组)，:data绑定数据
<template>
  <div class="hello">
    <component v-for="(item,index) in componentArr" :key="index" :is="item.type" :data=item.data />
  </div>
</template>

//定义数据
data(){
    return {
      componentArr : [],    //组件数组
      componentName : "",   //组件名称
    }
  }
//方法，list为接口数据，包含所需的组件。list.type即为组件类型
for(var i = 0;i<list.length;i++){
	switch(list.type){
		case "a" :
                _this.componentName = () => import('./a.vue')
                _this.componentArr.push({
                  type:_this.componentName,
                  data:id //需要传的数据，就是模板中的:data绑定的数据
                });
                break;
        case "b" :
                _this.componentName = () => import('./b.vue')
                _this.componentArr.push({
                  type:_this.componentName,
                  data:id //需要传的数据，就是模板中的:data绑定的数据
                });
                break;
	}
}

怎么在a.vue，b.vue接收传入的数据呢？
用props就可以了！接收到之后可以在data里面定义一个变量来接收，或者直接在模板上绑定。
以a.vue为例

props: {
      data: {
        type: Object
      }
    },
//props接收之后直接在模板上绑定
<template>
	<div :v-bind="data.id"></div>
</template>
//或者用data定义变量接收做后续处理
data(){
	//这样incomingData就是跟随组件传入的数据了
	incomingData : this.data
}

这样就可以实现按需引入不同的组件，并绑定传入数据了。
这是我所遇到的需求下的做法，有什么不对或者更好的做法欢迎评论指正哦，谢谢！