<!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>