App.vue
<template>
<div id="app">
<h1>App标题</h1>
<button @click='change(0)'>点我显示Selina</button>
<button @click='change(1)'>点我显示Hebe</button>
<keep-alive>
<component :is='c'></component>
</keep-alive>
<!-- 当在这些组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重复渲染导致的性能问题 -->
</div>
</template>
<script>
import Selina from "./components/Selina.vue"
import Hebe from "./components/Hebe.vue"
export default{
components:{
Selina,
Hebe
},
data(){
return{
c:Selina
}
},
methods:{
change(num){
if(num==0){
this.c=Selina
}else if(num==1){
this.c=Hebe
}
}
}
}
</script>
Selina.vue:
<template>
<div>
<h1>我是Selina</h1>
</div>
</template>
Hebe.vue
<template>
<div>
<h1>我是Hebe</h1>
</div>
</template>