vue动态切换视图

big.vue

<template>
<div>
big
<p>{{view}}</p>
<!--标准规范-->
<component :is='view'></component>
<button @click="changeView">切换组件</button>
<button @click="changeViewLife">切换组件2</button>

<!--做到一个缓存效果，实时更新的数据不能用-->
<keep-alive>
<component :is='view'></component>
</keep-alive>
</div>
</template>

<script>
import Small1 from './small1'
import Small2 from './small2'
export default{
name:'big',
data(){
return{
view:'Small1',
flag:true
}
},
methods:{
changeView(){
this.view = 'Small2'
},
changeViewLife(){
if(this.flag){
this.view = 'Small1'
this.flag = false
}else{
this.view = 'Small2'
this.flag = true
}
}
},
components:{
Small1,
Small2
}
}
</script>

<style>
</style>

small1.vue

<template>
<div>small1</div>
</template>

<script>
export default{
name:'small1',
data(){
return{

}
},
methods:{

}
}
</script>

<style>
</style>

small2.vue

<template>
<div>small2</div>
</template>

<script>
export default{
name:'small2',
data(){
return{

}
},
methods:{

}
}
</script>

<style>
</style>

 

转载于:https://www.cnblogs.com/qiyc/p/9114398.html