vue踩坑系列——动态组件

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>