使用v-if 實現如下功能，有倆控件，跟一個按鈕，默認顯示其中一個控件，點擊按鈕顯示另一個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽與具名插槽</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button type="button" @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one',{
template:'<b > child-one </b>'
});
Vue.component('child-two',{
template:'<b > child-two </b>'
});
var app = new Vue({
el:'#app2',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = this.type == 'child-one'?'child-two':'child-one'
}
}
});
</script>
</body>
</html>
使用動態組件實現上面功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽與具名插槽</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<component :is='type'></component>
<!-- <child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two> -->
<button type="button" @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one',{
template:'<b > child-one </b>'
});
Vue.component('child-two',{
template:'<b > child-two </b>'
});
var app = new Vue({
el:'#app2',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = this.type == 'child-one'?'child-two':'child-one'
}
}
});
</script>
</body>
</html>
使用v-once進行優化
以上功能當顯示一個組件時會銷燬另一個組件，此時我們加入v-once會在初次使用組件時將組件加入緩存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽與具名插槽</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<component :is='type'></component>
<!-- <child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two> -->
<button type="button" @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one',{
template:'<b v-once> child-one </b>'
});
Vue.component('child-two',{
template:'<b v-once> child-two </b>'
});
var app = new Vue({
el:'#app2',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = this.type == 'child-one'?'child-two':'child-one'
}
}
});
</script>
</body>
</html>