vue3的keepAlive缓存组件

新建login.vue

<template>
    <div>
        <input type="text">
        <input type="text">
        <button @click="submit">登陆</button>
    </div>
</template>

<script setup lang="ts">

</script>
<script >
export  default{
    name:'login'
}
</script>
<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

新建insert.vue

<template>
    <div>
        <input type="text"  v-model="data.reform.text">
        <input type="text"  v-model="data.reform.password">
        <input type="text"  v-model="data.reform.code">
        <button @click="submit">注册</button>
    </div>
</template>

<script setup lang="ts">
import {reactive,onActivated}  from 'vue'
type  refo={
   reform:{
        text:string,
    password:string,
    code:string
   }
}
let  data=reactive<refo>({
    reform:{text:"",password:'',code:''}
})
onActivated(()=>{
 data.reform.code=''
})
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

父组件引入

<template>
    <div class="content">       
    <button  @click="slectadd">切换</button>
   <keep-alive :exclude="['login']">
      <login v-if="flag"/>
      <insert v-else/>
   </keep-alive>
   </div>
</template>

<script setup lang="ts">
import  {reactive ,markRaw,ref} from 'vue'


import  login  from '../../components/login/index.vue'
import  insert  from '../../components/insert/index.vue'

const  flag=ref(true);
const  slectadd=()=>{
  flag.value=!flag.value
}
 
</script>

<style scoped lang="less">
.bg-red{
    background: red;
}
.content{
    flex: 1;
     display: flex;
    // height: 100vh;
    margin: 20px;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    &-items{
        padding:20px;border-bottom: 1px solid #ffffff;
    }
     .tab{
         height: 50px;
        border:1px solid red;
     }
     component{
         height: 30px;;
     }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47