前言

在组件的运用中，在父组件有些时候我们可能需要传递一些 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来使切换掉的组件保存的原有的状态，也就是说让其不被卸载掉。

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

到就到这了，拜拜。