vue中组件的切换方式

方式一

使用v-if和v-else实现切换

1. 定义组件

Vue.component('myTag1',Vue.extend({
    template:'<p>tag1</p>'
}))
Vue.component('myTag2',Vue.extend({
    template:'<p>tag2</p>'
}))

2. 增加flag

var vm =new Vue({
	el:'app'
	data:{
		flag:true
	}
})

3. 页面内使用

<div id="app">
        <a href="" @click.prevent="flag=true">tag1</a>
        <a href="" @click.prevent="flag=false">tag2</a>
        <my-tag1 v-if="flag"></my-tag1>
        <my-tag2 v-else="flag"></my-tag2>
    </div>

方式二

使用vue提供的component标签实现切换
适合多个组件的切换

1. 定义组件（和方式一相同）

Vue.component('myTag1',Vue.extend({
    template:'<p>tag1</p>'
}))
Vue.component('myTag2',Vue.extend({
    template:'<p>tag2</p>'
}))

2. 增加componentId

var vm =new Vue({
	el:'app'
	data:{
		componentId:'my-tag1'
	}
})

3. 页面内使用

<div id="app">
        <a href="" @click.prevent="componentId='my-tag1'">tag1</a>
        <a href="" @click.prevent="componentId='my-tag2'">tag2</a>
        <component :is="componentId"></component>
</div>

切换组件的动画

1. 用transition标签包裹切换的组件

<a href="" @click.prevent="componentId='my-tag1'">tag1</a>
 <a href="" @click.prevent="componentId='my-tag2'">tag2</a>
<transition mode=out-in>
		<!--mode是设置动画的模式，out-in是指上一个动画完全出场完了，下一个动画才能入场，还有in-out，下一个动画入场了，上一个动画才能出场 -->
        <component :is="componentId"></component>
</transition>

2. 定义样式

v-enter,v-leave-to{//样式}
.v-enter-active,v-leave-active{//样式}