Vue slot

slot content

v-slot 是一种组件内容复用的方式。可以向父级组件中传入特定的内容，使得其渲染到特定的位置。

<!-- 子级组件 -->
<a :href="url">
  <strong>Error, </strong>
  <slot>AHA</slot>
</a>
<!-- 父级组件 -->
<navigation-link>
  <template v-slot:default>
    hello v-slot
  </template>
</navigation-link>

compilation scope

父级组件和子组件中变量的作用域，在默认情况下都是仅限于当前组件。

fallback content

可以在子组件中设置一个 fallback 内容，当父级组件没有设置内容时作为默认内容来进行展示。

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

named slots

我们可以在子组件中设置多个 slot 并为其设置特定的名字，这样在父级组件传值的时候就可以将其传递到特定的位置，更为精细的控制传值方式。

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
<!-- 使用方式 -->
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

scoped slots

通过设置 scoped slots 可以将子组件中的数据传递给父级组件，可以在父级组件中来决定传递给子组件的值是多少。

<!-- 子级组件 -->
<div>
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</div>
 <current-user>
    <template v-slot:default="{ user }">
      {{ user.lastName }}
    </template>
  </current-user>

在子组件中设定好 user 的值，并作为 props 通过 <slot></slot> 传入到父级组件，这样父级组件就可以访问到这个 user 值。

dynamic slot name

动态的设置具名 slot 的值。

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

使用 [] 来设置具名 slot 的名字。

abbreviated syntax and deprecated syntax

default 缩略

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

在使用 scope slots 特性时，可以省去 :default 的书写以及对应的 <template> 标签包裹。

named slots shorhand

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

使用 #name 来代替 v-slot:name 。使用 default 的时候，需要设置为 #slot 。

deprecated syntax

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

<slot-example>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>

现语法和淘汰语法的对比