vue动态引入(按需引入)组件并传值
需求就是有一个组件库,需要根据接口所传的组件类型按需引入生成页面//模板<template><div class="hello"><component v-for="(item,index) in componentArr" :key="index" :is="item.type" :data=item.data /></di...
·
需求 就是有一个组件库,需要根据接口所传的组件类型按需引入生成页面
//模板,用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
}
这样就可以实现按需引入不同的组件,并绑定传入数据了。
这是我所遇到的需求下的做法,有什么不对或者更好的做法欢迎评论指正哦,谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)