vue踩坑系列——动态组件

vue实现动态组件的两种方法

效果图：

一种是使用v-if条件渲染：

子组件：

<template>
<div class="qui-list">
<span class="list-tips">{{tipsText}}</span>
<qui-btn v-on:btnClickEvent='clickEvent' :msg=msg class='small' v-if='seen==0' :seen=seen></qui-btn>
<qui-arrow v-on:btnClickEvent='clickEvent' :msg=msg class='small' v-else :seen=seen>
<img src="xxx.png" slot='icon' class="ico" alt="">
</qui-arrow>
</div>
</template>
<script>
//按钮组件
import quiBtn from '../components/quiButton.vue'
//箭头组件
import quiArrow from '../components/quiArrow.vue'
export default{
props:{
msg:{
default:'上传'
},
tipsText:{
default: '默认的文案1'
},
currentView:{
default: 'qui-btn'
},
seen:{
default:0
}
},
components:{
'qui-btn':quiBtn,
'qui-arrow':quiArrow
},
methods:{
clickEvent:function(){
alert('...')
}
}
}
</script>

<template>
<div class="pageQuiList">
<qui-list tipsText='文件1' msg='下载1' seen='0'></qui-list><!-- 按钮组件 -->
<qui-list v-on:btnClickEvent="test" msg='下载2' tipsText='文件2'></qui-list><!-- 按钮组件 -->
<qui-list ref="child1" tipsText="文件3" currentView="qui-arrow" msg='下载3' seen='1'></qui-list><!-- 箭头组件 -->
</div>
</template>

<script>
import quiList from '../components/quiList.vue'
export default{
name:'pageQuiList',
components:{
'qui-list': quiList
},
methods:{
test:function(){
alert('sss')
}
}
}
</script>

第二种是使用is+component实现：

子组件：

<template>
<div class="qui-list">
<span class="list-tips">{{tipsText}}</span>
<!-- <qui-btn v-on:btnClickEvent='btnClickEvent1' :msg=msg class='small'></qui-btn> -->
<component :is='currentView' v-on:btnClickEvent='clickEvent' :msg=msg class="small" keep-alive></component>
</div>
</template>

<script>
import quiBtn from '../components/quiButton.vue'
import quiArrow from '../components/quiArrow.vue'
export default{
props:{
msg:{
default:'上传'
},
tipsText:{
default: '默认的文案1'
},
currentView:{
default: 'qui-btn'
}
},
components:{
'qui-btn':quiBtn,
'qui-arrow':quiArrow
},
methods:{
clickEvent:function(){
alert('...')
}
}
}
</script>

<template>
<div class="pageQuiList">
<qui-list tipsText='自定义文案，默认右边是按钮' msg='弹层'></qui-list>
<qui-list v-on:btnClickEvent="test"></qui-list>
<qui-list ref="child1" tipsText="最右边是箭头" currentView="qui-arrow"></qui-list>
</div>
</template>

<script>
import quiList from '../components/quiList.vue'
export default{
name:'pageQuiList',
components:{
'qui-list': quiList
},
methods:{
test:function(){
alert('sss')
}
}
}
</script>