slot插槽

匿名插槽 & 具名插槽

子组件

<template>
  <div>
    <slot></slot>
    <slot name="nameSlot"></slot>
  </div>
</template>

父组件

<template>
  <HelloWorld>
    <div>匿名插槽</div>
    <template #nameSlot>
      <div>这是具名插槽</div>
    </template>
  </HelloWorld>
</template>
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue"
</script>

传送门

用于把当前元素的 HTML 渲染到指定的原生节点上，脱离了原有的层级关系

<template>
  <Teleport :disabled="false" to="body">
    <div>传送到body</div>
  </Teleport>
</template>

当 disabled 为 false 表示传送开启 ; true 表示传送关闭

to 表示要传送的标签

keep-alive组件

和 vue2 用法一致,可用作组件级别和路由级别的页面缓存, 但对内存占用相对较大; 性能和用户体验要相互取舍

keep-alive 在 vue3 中的生命周期

• onActivated() 初始话
• onDectivated() 卸载