vue3的keepAlive缓存组件

@小朱呀路

已于 2022-07-30 20:19:14 修改

阅读量343

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2022-07-27 10:08:55 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/126008639

版权

vue3 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

该博客讨论了两个Vue组件——login.vue和insert.vue在页面切换时的状态管理问题。login.vue中的输入框内容在切换后丢失，而insert.vue通过onActivated生命周期钩子实现了内容保留。父组件使用keep-alive进行组件缓存，但将login.vue排除在外，以确保其状态不被保留。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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