vue3的keepAlive缓存组件

新建login.vue

 <template>
    <div>login 此界面的输入框的东西切换回来就没了
        <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>

新建insert.vue

 <template>
    <div>insert  无论切换都会保留input的内容
        <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>

父组件引入

<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>