小白学 VUE 系列之插槽

插槽

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口

创建

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

默认值,不提供任何插槽内容时自动调用默认的

<button type="submit">
  <slot>Submit</slot>
</button>

具名插槽

我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于这样的情况,<slot> 元素有一个特殊的 attribute:name。这个 attribute 可以用来定义额外的插槽:

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

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。