<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态组件和v-once指令</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- component：动态组件，根据数据type的名字和哪一个组件名匹配从而调用 -->
			<!-- 先显示child-one然后点击按钮显示child-two -->
			
			<!-- 3：使用动态组件判断要显示哪一个组件 -->
			<component :is="type"></component>
			
			<!-- 当在组件模板中使用v-once时，使用下面两句代码可以提高性能，因为组件被加载一次后会存入内存 -->
			<!--
			<child-one v-if="type==='child-one'"></child-one>
			<child-two v-if="type==='child-two'"></child-two> 
			-->
			<button @click="handleBtn">change</button>
		</div>
		<script>
			/* 1：定义两个组件child-one和child-two */
			Vue.component('child-one',{
				template:'<div v-once>child-one</div>'
			})
			Vue.component('child-two',{
				template:'<div v-once>child-two</div>'
			})
			var vm=new Vue({
				el:'#app',
				data:{
					/* 2：把第一次要显示的组件名赋值给一个变量type */
					type:'child-one'
				},
				methods:{
					/* 4：当按钮被点击一次就把type的值换为另一个组件的名字 */
					handleBtn:function(){
						this.type=(this.type==='child-one'?'child-two':'child-one')
					}
				}
			})
		</script>
	</body>
</html>