14.v3+ts的keepalive

1.缓存在内的组件值

<template>
  <div class="container">
    <button @click="flag = !flag">切換</button>
    <KeepAlive>
      <Foot v-if="flag"></Foot>
      <Content v-else></Content>
    </KeepAlive>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Head from "./components/head.vue";
import Foot from "./components/footer.vue";
import Content from "./components/content.vue";

const flag = ref<boolean>(false);
</script>

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

2.缓存你想要缓存的组件值

<template>
  <div class="container">
    <button @click="flag = !flag">切換</button>
   //这里不缓存某个值 
    <!-- <KeepAlive :exclude="['Content','Foot']">
   // 缓存某个值
    <KeepAlive :include="['Content']">
      <Foot v-if="flag"></Foot>
      <Content v-else></Content>
    </KeepAlive>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Foot from "./components/footer.vue";
import Content from "./components/content.vue";

const flag = ref<boolean>(false);
</script>

<style lang="scss" scoped>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.1子组件暴露名称

<template>
  <div class="container">
    content:
    <input type="text">
  </div>
</template>

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

</script>
<script lang="ts">
export default{
  name:'Content'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16