Vue组件切换的两种方式

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天

前言:大家好，我是痴心阿文。

我有另一个外号，学友哥，是源于喜欢张学友的那个表情包，所以被大家戏称学友哥。

这篇文章主要介绍Vue组件切换的两种方式。

Vue组件切换的两种方式，分别是两种，常见第一种 利用v-if 实现组件切换

		<div id="app">
			<p>{{msg}}</p>
			<!-- <div  @click.prevent="comName='login'" >登录</div>
			<div  @click.prevent="comName='register'">注册</div> -->
			<div class="box">
				<div  @click.prevent="flag = true" >登录</div>
				<div  @click.prevent="flag = false">注册</div>
			</div>
			<login v-if="flag"></login>
			<register v-else></register>
		</div>
		<script type="text/javascript">
			Vue.component('login',{
				template:'<div>登录页面</div>'
			})
			Vue.component('register',{
				template:'<div>注册页面</div>'
			})
			var vm = new Vue({
				el:"#app",
				data:{
					msg:'利用v-if 实现组件切换',
					flag:true
				}
			})
		</script>

vue组件切换方式第二种 利用组件的is属性 实现组件切换

		<div id="app">
			<p>{{msg}}</p>
			<div class="box">
				<div  @click.prevent="comName='login'" >登录</div>
				<div  @click.prevent="comName='register'">注册</div>
			</div>
			<component v-bind:is="comName"></component>
		</div>
		<script type="text/javascript">
			Vue.component('login',{
				template:'<div>登录页面</div>'
			})
			Vue.component('register',{
				template:'<div>注册页面</div>'
			})
			var vm = new Vue({
				el:"#app",
				data:{
					msg:'利用组件的is属性 实现组件切换',
					comName:''
				}
			})
		</script>

此时一位靓仔看完了文章，并点了个赞！好，不愧是你，棒~