持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言

在组件的运用中，在父组件有些时候我们可能需要传递一些html片段在子组件中显示，当然通过props也可以实现。但是vue给我们提供了一个更加便捷的方法，那就是插槽。它可以使我们使用组件就像是使用普通HTML标签一样，而闭合标签的内部就是我们在父组件中想要在其子组件展示的内容。

slot

当我们想像使用 html 标签式的使用组件时，也就是说在闭合的组件标签内传入我们想要传入的内容，我们就可以使用slot来完成。

在父组件中这么使用：

<Content>
  传递的内容
</Content>

当我们想传入的内容在子组件相应的位置展示时：

<template>
  <div>
    <h5>这是组件内部的内容</h5>
    <slot />
  </div>
</template>
</style>

就像上图所示的，从父组件闭合标签内传入的内容将会在相应的slot标签处展示。

有些时候我们可能有多个组件来回切换，当然通过v-if和v-else也是可以实现的，但vue提供一个更为简便的方法。

通过component标签和is属性便可实现：

<!-- curCom 表示当前的组件 -->
<component :is="curCom"></component>

：is的可以使：

注意：被切换掉的组件会自动卸载，当然我们可以通过keepAlive来使切换掉的组件保存的原有的状态，也就是说让其不被卸载掉。

今天我们介绍了两个很实用的功能，一个是插槽，一个是动态组件。灵活运用这两个功能将会在我们往后的开发中事倍功半，不过想要更深入的了解这两个功能的话，建议参考相关的文档在细细研究。

到就到这了，拜拜。