使用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>