vue之组件（动态组件及keep-alive）、VUE之过渡与动画和Vue阶段小结

VUE之组件（动态组件及keep-alive）

动态组件
Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。
案例：选项卡效果

<div id="app">
			<div class="tab_area">
				<ul>
					<li v-for="tab of tabs" @click="tab_option=tab" v-bind:class="[tab_option==tab?'tab_act':'']">{
  {tab}}</li>
				</ul>
				<keep-alive>
					<component v-bind:is="tab_option"></component>
				</keep-alive>
			</div>
		</div>

<script>
			Vue.component('home',{
				template:`<div>11111111</div>`
			})
			Vue.component('size',{
				template:`<div>2222222</div>`
			})
			Vue.component('manager',{
				template:`<div>3333333</div>`
			})
			Vue.component('location',{
				template:`<div>44444</div>`
			})
			var app=new Vue({
				el:'#app',
				data:{
					tab_option:'home',
					tabs:['home','size','manager','location']
				}
			})
		</script>

动态组件嵌套
案例：


动态组件keep-alive（组件的失活缓存）
<