Vue组件入门(三)插槽和动态组件

70 阅读2分钟

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

前言

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

slot

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

在父组件中这么使用:

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

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

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

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

动态组件

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

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

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

:is的可以使:

  • 注册的组件名

  • 导入的组件对象

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

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

到就到这了,拜拜。