关于插槽 slot

324 阅读4分钟

本篇(可能此系列会包含很多篇)纯属从Vue官方文档找来的内容,也可能会根据自身的知识情况扩展、延伸、归纳,进行个性化总结排版,方便自己记录和查阅。

在Vue2.6.0中具名插槽和作用域插槽引入了新的统一的语法(v-slot指令)。它取代了 slot 和slot-scope两个特性。

插槽作用域

当父级模板里的内容编译时只会在父级作用域里生效;子模板里的所有内容都是在子作用域里编译。 例子:

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

该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”),而不能访问 的作用域。例如 url 是访问不到的:

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined,因为 "/profile" 是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的 组件:

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

元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

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

一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候,我们可以在一个