Vue中的Slot

最新推荐文章于 2026-01-02 20:59:19 发布

原创最新推荐文章于 2026-01-02 20:59:19 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了Vue中Slot的概念及其用途，重点讲解了如何通过Slot实现父组件向子组件传递动态内容。通过示例展示了默认Slot和命名Slot的用法，以及在封装组件时如何利用Slot实现不同模块的灵活配置。示例中展示了如何在BaseLayout组件中定义多个Slot，并在实际使用时插入自定义内容。

作用：父组件向子组件传递模板（原理似props）

何时用：封装组件，组件中某一模块不固定时

slot中有内容时，父组件不传值，用默认内容

负组件传值，用负组件中的

<button type="submit">
  <slot>
    Submit <!-- fallback content -->
  </slot>
</button>

可添加命名槽，父组件调用时，传入name

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

使用

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>