Vue3 之内置组件详解：keep-alive 与 slot

2024-01-27 23:58:27







回首 Vue3 之组件篇（三）

大家好，我是前端开发工程师小明。今天，我们将继续学习 Vue3 中的组件。在上一篇文章中，我们介绍了组件的基础知识和使用方式。在本文中，我们将重点介绍两个内置组件：keep-alive 和 slot。

## keep-alive 组件

keep-alive 组件用于缓存组件状态。当组件被切换到非活动状态时，keep-alive 组件会将组件的状态保存起来。当组件再次被激活时，keep-alive 组件会将保存的状态恢复到组件中。

keep-alive 组件的使用非常简单。只需要将需要缓存状态的组件包裹在 keep-alive 组件中即可。例如：

```html
<template>
  <keep-alive>
    <my-component />
  </keep-alive>
</template>

上面的代码中，my-component 组件的状态将会被缓存起来。当 my-component 组件被切换到非活动状态时，它的状态将会被保存起来。当 my-component 组件再次被激活时，它的状态将会被恢复。

keep-alive 组件还有几个重要的属性：

include：指定哪些组件的状态需要被缓存。
exclude：指定哪些组件的状态不需要被缓存。
max：指定最多可以缓存多少个组件的状态。

slot 组件

slot 组件用于在组件中插入动态内容。slot 组件可以将父组件中的内容插入到子组件中。

slot 组件的使用也很简单。只需要在父组件中定义一个 slot 组件，然后在子组件中使用 slot 组件即可。例如：

<!-- 父组件 -->
<template>
  <div>
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <header>
      <h1>{{ title }}</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>Copyright © {{ year }}</p>
    </footer>
  </div>
</template>