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>