Vue组件-------动态组件&keep-alive

让我们跟着案例的注释来了解吧。。。

<div class="app">
			<ul>
				<li v-for='book of books' 
	/*给按钮添加点击事件，点击切换*/
				@click='name_big=book'
	/*给按钮添加激活样式*/
				 :class="[name_big==book?'name_se':'']"
				 >{{book}}</li>
			</ul>
<!--失活的组件将会被缓存-->
			<keep-alive>
<!--
选项卡效果可以通过 Vue 的 <component> 元素加一个特殊的 is 特性实现（
组件在:is='name_big'中的name_big发生改变时变化）
-->
				<component :is='name_big' ></component>
			</keep-alive>
		</div>
		<script>
/*组件同样可以实现选项卡嵌套*/
			Vue.component('home',{
				template:`<div>
					<ul>
						<li v-for='item of items' 
						@click='child_big=item' 
						:class="[child_big==item?'child_se':'']"
						>{{item}}</li>
					</ul>
					<component :is='child_big' ></component>
				</div>`,
				data(){
					return {
						child_big:'top',
						items:['top','nr','flooer']
					}
				}
			})
			Vue.component('top',{
				template:`<div>首页头部</div>`
			})
			Vue.component('nr',{
				template:`<div>首页中部</div>`
			})
			Vue.component('flooer',{
				template:`<div>首页底部</div>`
			})
			
			
			
			Vue.component('JS',{
				template:`<div>公司介绍</div>`
			})
			Vue.component('DZ',{
				template:`<div>公司地址</div>`
			})
			Vue.component('HJ',{
				template:`<div>公司环境</div>`
			})
			Vue.component('YJ',{
				template:`<div>公司意见</div>`
			})
			var app = new Vue({
				el:'.app',
				data:{
					name_big:'home',
					books:['home','JS','DZ','HJ','YJ']
				}
			})
		</script>