Vue小笔记——动态组件动态组件component标签有一个is属性，该属性可以动态的改变组件keep-alive标签可

动态组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<keep-alive>
				<component :is="who"></component>
			</keep-alive>
			<ul>
				<li @click="who='home'">首页</li>
				<li @click="who='list'">列表页</li>
				<li @click="who='cart'">购物车</li>
			</ul>
		</div>
	</body>
	<script src="../1day/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				who:''
			},
			//局部组件
			components:{
				"home":{
					template:`<div>首页</div>`,
				},
				"list":{
					template:`<div>列表页</div>`,
				},
				"cart":{
					template:`<div>购物车页</div>`,
				}
			}
		})
	</script>
</html>

component标签有一个is属性，该属性可以动态的改变组件
keep-alive标签可以保存页面状态，避免重复渲染