<keep-alive> can cache the component, the content of the component can be cached after it is changed, no need to load it every time
Grandpa interface
<template>
<div>
{
{
msg}}<br />
<hr>
<keep-alive>
<component :is="nowcomponent"></component>
</keep-alive>
<br />
<button @click="changea()">更换A</button>
<button @click="changeb()">更换B</button>
</div>
</template>
<script>
import HelloWorld from "./HelloWorld";
import HelloWorld1 from "./HelloWorld1";
export default {
data(){
return {
msg:"我是爷爷页面",
nowcomponent:HelloWorld1
}
},components:{
HelloWorld,
HelloWorld1
},methods:{
changea(){
this.nowcomponent=HelloWorld;
},changeb(){
this.nowcomponent=HelloWorld1;
}
}
}
</script>
Parent page
<template>
<div id="app">
我是儿子页面<br>
点击按钮我就从500变成了800<br/> {
{
width}}
<hr>
<HelloWorld1 :width="width" @myChange="dochange" />
</div>
</template>
<script>
import HelloWorld1 from "./HelloWorld1";
export default {
name: 'App',
data(){
return{
width:500
}
},methods:{
dochange(val){
this.width=val;
}
},
components: {
HelloWorld1
}
}
</script>
Grandson interface
<template>
<div>
我是孙子页面<br>
<button @click="dochange()">ahahha</button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
dochange() {
this.$emit("myChange", 800);
},
},
};
</script>