众所周知,组件可以缓存住组件的数据;具体用法可以看官网;
大概的用法就是下面这样的
<template>
<keep-alive>
<component :is="currentComponet"></component>
</keep-alive>
</template>
<script>
import residence from '~/components/publish/residence'
import villa from '~/components/publish/villa'
export default {
data() {
return {
currentComponet: 'residence',
}
},
}
</script>
注意我这里currentComponent后面跟着的是字符串
如果你写成currentComponet: residence,那么在residence组件中的created会触发两次
第一次:进入这个页面的时候回触发一次
第二次:在切换currentComponet的时候也会触发一次;
所以,注意,一定要写成字符串的形式