vue踩坑系列——动态组件

效果图：

右侧按钮是动态组件,分为按钮组件和箭头组件

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

当seen=0的时候，使用按钮组件，否则使用箭头组件

子组件：

<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>