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

//模板,用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
}

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

Logo

前往低代码交流专区

更多推荐