슬롯

이 페이지에서는 구성 요소 기본 사항을 읽었다고 가정합니다. 아직 컴포넌트에 대해 잘 모르신다면 먼저 읽어보시길 권합니다.

2.6.0에서는 명명된 슬롯과 범위가 지정된 슬롯에 대한 새로운 통합 구문(v-slot 지시어)을 도입했습니다. 이는 현재 더 이상 사용되지 않지만 제거되지 않고 여전히 문서 내 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

目录

• 插槽内容

• 编译作用域

• 后备内容

• 具名插槽

• 作用域插槽

  • 独占默认插槽的缩写语法

  • 解构插槽 Prop

• 动态插槽名

• 具名插槽的缩写

• 其它示例

• 废弃了的语法

  • 带有 slot 特性的具名插槽

  • 带有 slot-scope 特性的作用域插槽

插槽内容

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

它允许你像这样合成组件：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

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

当组件渲染的时候，<slot></slot> 기능입니다. 새로운 구문의 출처는 RFC

< li> 🎜슬롯 콘텐츠🎜🎜
• 🎜컴파일 범위 🎜 🎜
• 🎜콘텐츠 백업🎜🎜
• 🎜명명된 슬롯🎜🎜
• 🎜스코프 슬롯🎜🎜
  • 🎜전용 기본 슬롯의 약어 구문 🎜🎜
  • 🎜해체된 슬롯 Prop🎜🎜
• 🎜동적 슬롯 이름 🎜🎜
• 🎜이름이 지정된 슬롯의 약어 🎜🎜
• 🎜기타 예 🎜🎜
• 🎜더 이상 사용되지 않는 구문🎜🎜
  • 🎜슬롯 기능이 있는 명명된 슬롯🎜🎜
  • 🎜슬롯 범위가 있는 범위 슬롯 attribute🎜🎜

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

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

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

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

<submit-button></submit-button>

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

<submit-button>
  Save
</submit-button>

<button type="submit">
  Save
</button>

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

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

自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。

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

<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>

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

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

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

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template>

컴파일 범위

<span>
  <slot>{{ user.lastName }}</slot>
</span>

<current-user>
  {{ user.firstName }}
</current-user>

🎜상위 템플릿의 모든 항목은 상위 범위에서 컴파일됩니다. 하위 템플릿 콘텐츠의 모든 항목은 하위 범위에서 컴파일됩니다. 🎜

백업 콘텐츠

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

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

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

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

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

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

이름이 지정된 슬롯

---

🎜2.6.0부터 업데이트되었습니다. slot 속성 사용에 대한 더 이상 사용되지 않는 구문은 여기<에서 찾을 수 있습니다. /아>. 🎜

🎜때로는 여러 개의 슬롯이 필요할 때가 있습니다. 예를 들어, 다음 템플릿을 사용하는 <base-layout> 구성 요소의 경우: 🎜

function (slotProps) {
  // 插槽内容
}

🎜이러한 경우 <slot> 요소에는 특수 속성이 있습니다. 코드>이름. 이 기능은 추가 슬롯을 정의하는 데 사용할 수 있습니다. 🎜

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

🎜 name이 없는 <slot> 콘센트는 암시적 이름 "default"를 갖습니다. 🎜🎜이름이 지정된 슬롯에 콘텐츠를 제공할 때 <template> 요소에 v-slot 지시문을 사용하고 v-slot <으로 끝낼 수 있습니다. /code>의 매개변수에는 다음 형식으로 이름이 지정됩니다. 🎜

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

🎜이제 <template> 요소의 모든 내용이 해당 슬롯으로 전달됩니다. v-slot을 사용하여 <template>로 래핑되지 않은 모든 콘텐츠는 기본 슬롯의 콘텐츠로 처리됩니다. 🎜

그러나 더 명시적으로 만들고 싶다면 기본 슬롯의 내용을 <template>로 래핑할 수 있습니다. <template> 中包裹默认插槽的内容：

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

任何一种写法都会渲染出：

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

注意： v-slot 只能添加在一个 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot 特性不同。

作用域插槽

---

自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<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 #="{ user }">
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">?</span>
    {{ todo.text }}
  </template>
</todo-list>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

<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>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template>

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

어느 쪽이든 렌더링됩니다.

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

참고: < 코드 >v-slot은 <template>에만 추가할 수 있습니다(예외), 이것과 더 이상 사용되지 않는 slot 기능이 다릅니다.

Scope 슬롯

2.6.0 이후 업데이트됨 이후 그 다음에. 더 이상 사용되지 않는 slot-scope 속성 사용 구문은 여기에서 찾을 수 있습니다. .

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

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

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

<slot-example>
  <span slot-scope="{ msg }">
    {{ msg }}
  </span>
</slot-example>

🎜🎜전용 기본 슬롯에 대한 약어 구문🎜🎜🎜🎜위의 경우 제공된 컨텐츠에 기본 슬롯만 있는 경우 해당 컴포넌트의 라벨을 그대로 사용할 수 있습니다. 슬롯의 템플릿으로 사용됩니다. 이런 방식으로 구성 요소에서 직접 v-slot을 사용할 수 있습니다. 🎜

<todo-list v-bind:todos="todos">
  <template slot="todo" slot-scope="{ todo }">
    <span v-if="todo.isComplete">?</span>
    {{ todo.text }}
  </template>
</todo-list>

이는 v-slot의 값이 실제로 함수 정의에서 매개변수로 전달될 수 있는 모든 JavaScript 표현식이 될 수 있음을 의미합니다. 따라서 지원되는 환경(단일 파일 구성 요소 또는 최신 브라우저), ES2015 구조화하여 특정 항목을 전달합니다. 슬롯 소품은 다음과 같습니다: v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

动态插槽名

2.6.0 新增

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

具名插槽的缩写

2.6.0 新增

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

其它示例

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如，我们要实现一个 <todo-list> 组件，它是一个列表且包含布局和过滤逻辑：

我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：

现在当我们使用 <todo-list> 组件的时候，我们可以选择为 todo 定义一个不一样的 <template>rrreee

동적 슬롯 이름

🎜2.6.0 새로운 🎜

명명된 슬롯의 약어

🎜2.6.0 New 🎜

다른 예

이것은 범위가 지정된 슬롯이 유용할 수 있는 빙산의 일각에 불과합니다. 범위가 지정된 슬롯을 더 실제적으로 사용하려면 Vue Virtual Scroller, Vue Promised 및 Portal Vue와 같은 라이브러리를 찾아보는 것이 좋습니다.

더 이상 사용되지 않는 구문

v-slot 지시문은 slot API 대안에 대한 더 나은 지원을 제공하기 위해 Vue 2.6.0에 도입되었습니다. 슬롯 범위 기능에 추가하세요. v-slot 전체 출처는 다음을 참조하세요. v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope 特性仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

带有 slot 特性的具名插槽

自 2.6.0 起被废弃。新推荐的语法请查阅这里。

在 <template> 上使用特殊的 slot 特性，可以将内容从父级传给具名插槽 (把这里提到过的 <base-layout> 组件作为示例)：

或者直接把 slot 特性用在一个普通元素上：

这里其实还有一个未命名插槽，也就是默认插槽，捕获所有未被匹配的内容。上述两个示例的 HTML 渲染结果均为：

带有 slot-scope 特性的作用域插槽

自 2.6.0 起被废弃。新推荐的语法请查阅这里。

在 <template> 上使用特殊的 slot-scope 特性，可以接收传递给插槽的 prop (把这里提到过的 <slot-example>

🎜 슬롯 기능이 있는 명명된 슬롯🎜🎜 🎜🎜 🎜🎜2.6.0부터 더 이상 사용되지 않습니다. 새로운 권장 구문을 보려면 🎜🎜여기🎜🎜🎜를 확인하세요. 🎜🎜🎜<template>의 특수 slot 속성을 ​​사용하여 상위 항목의 콘텐츠를 명명된 슬롯으로 전달합니다(여기🎜에서 <base-layout> 구성요소를 예로 언급했습니다.):🎜rrreee 🎜또는 직접 사용 일반 요소의 slot 속성: 🎜rrreee🎜여기에는 실제로 이름이 지정되지 않은 슬롯이 있는데, 이는 일치하지 않는 모든 콘텐츠를 캡처하는 🎜기본 슬롯🎜입니다. 위 두 가지 예의 HTML 렌더링 결과는 다음과 같습니다. 🎜rrreee🎜🎜🎜

🎜with slot-scope 속성의 범위 슬롯 🎜🎜🎜🎜🎜은 2.6.0부터 더 이상 사용되지 않습니다. 새로운 권장 구문을 보려면 여기🎜를 확인하세요. 🎜🎜 <template>의 특수 slot-scope 속성을 ​​사용하여 슬롯에 전달된 prop을 수신합니다( 여기 🎜에서 <slot-example> 구성 요소를 예로 언급했습니다. 🎜rrreee

여기서 slot-scope는 수신된 prop 객체가 <template> 범위에 slotProps 변수로 존재함을 선언합니다. JavaScript 함수 매개변수의 이름을 지정하는 것처럼 slotProps의 이름을 임의로 지정할 수 있습니다. slot-scope 声明了被接收的 prop 对象会作为 slotProps 变量存在于 <template> 作用域中。你可以像命名 JavaScript 函数参数一样随意命名 slotProps。

这里的 slot="default" 可以被忽略为隐性写法：