fente

Cette page suppose que vous avez lu Bases des composants. Si vous ne savez pas encore grand-chose sur les composants, je vous recommande de le lire en premier.

Dans la version 2.6.0, nous avons introduit une nouvelle syntaxe unifiée pour les slots nommés et les slots scoped (la directive v-slot). Il remplace slot et slot-scope qui sont actuellement obsolètes mais non supprimés et sont toujours Caractéristiques de 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> dans le document. L'origine de la nouvelle syntaxe peut être trouvée dans ce RFC

< li> 🎜Contenu du slot🎜🎜
• 🎜Portée de la compilation 🎜 🎜
• 🎜Contenu de sauvegarde🎜🎜
• 🎜Emplacement nommé🎜🎜
• 🎜Emplacement de portée🎜🎜
  • 🎜Syntaxe d'abréviation pour l'emplacement par défaut exclusif 🎜🎜
  • 🎜Accessoire d'emplacement déconstruit🎜🎜
• 🎜Nom d'emplacement dynamique 🎜🎜
• 🎜Abréviation de l'emplacement nommé 🎜🎜
• 🎜Autres exemples 🎜🎜
• 🎜Syntaxe obsolète🎜🎜
  • 🎜Emplacement nommé avec fonctionnalité de slot🎜🎜
  • 🎜Slot de portée avec slot-scope attribut🎜🎜

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

Portée de compilation

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

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

🎜Tout ce qui se trouve dans le modèle parent est compilé dans la portée parent ; tout le contenu du modèle enfant est compilé dans les portées enfants. 🎜

Contenu de sauvegarde

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

Emplacement nommé

---

🎜Mise à jour depuis la 2.6.0. La syntaxe obsolète pour l'utilisation de l'attribut slot se trouve ici< /a>. 🎜

🎜Parfois, nous avons besoin de plusieurs emplacements. Par exemple, pour un composant <base-layout> avec le modèle suivant : 🎜

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

🎜Pour de tels cas, l'élément <slot> a un attribut spécial : < code>nom. Cette fonctionnalité peut être utilisée pour définir des emplacements supplémentaires : 🎜

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

🎜Une prise <slot> sans nom portera le nom implicite "default". 🎜🎜Lorsque nous fournissons du contenu à un emplacement nommé, nous pouvons utiliser la directive v-slot sur un élément <template> et la terminer par v-slot < Le paramètre de /code> reçoit son nom sous la forme : 🎜

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

🎜Maintenant, tout ce qui se trouve dans l'élément <template> sera passé dans l'emplacement correspondant. Tout contenu non enveloppé dans <template> avec v-slot sera traité comme le contenu de l'emplacement par défaut. 🎜

Cependant, si vous souhaitez être plus explicite, vous pouvez toujours envelopper le contenu de l'emplacement par défaut dans un <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>

Dans les deux cas, le rendu :

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

Remarque : < code >v-slot ne peut être ajouté qu'à une cible <template> (uniquement une exception), ceci et le slot les fonctionnalitéssont différentes.

Scope slot

Depuis 2.6.0 Mis à jour depuis alors. La syntaxe obsolète pour l'utilisation de l'attribut slot-scope se trouve ici .

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

🎜🎜Syntaxe abrégée pour les emplacements par défaut exclusifs🎜🎜🎜🎜Dans le cas ci-dessus, lorsque le contenu fourni n'a que l'emplacement par défaut, l'étiquette du composant peut être utilisée comme Utilisez-le comme modèle pour la fente. De cette façon, nous pouvons utiliser v-slot directement sur le composant : 🎜

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

Cela signifie que la valeur de v-slot peut en fait être n'importe quelle expression JavaScript pouvant être transmise en tant que paramètre dans une définition de fonction. Donc dans un environnement pris en charge (Composant à fichier unique ou Navigateurs modernes), vous pouvez également utiliser ES2015 Déstructuration à passer Le spécifique Les accessoires de slot sont les suivants : 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

Nom de l'emplacement dynamique

🎜2.6.0 Nouveau 🎜

Abréviation de l'emplacement nommé

🎜2.6.0 Nouveau 🎜

Autres exemples

Ce n'est que la pointe de l'iceberg où les slots limités peuvent être utiles. Pour une utilisation plus réelle des emplacements limités, nous vous recommandons de parcourir des bibliothèques telles que Vue Virtual Scroller, Vue Promised et Portal Vue.

Syntaxe obsolète

La directive v-slot a été introduite dans Vue 2.6.0 pour fournir une meilleure prise en charge de l'alternative à l'API slot à la fonctionnalité slot-scope. v-slot Pour l'origine complète, voir ceci 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>

🎜Emplacement nommé avec la fonctionnalité slot🎜🎜 🎜🎜 🎜🎜Obsolète depuis la version 2.6.0. Pour la nouvelle syntaxe recommandée, veuillez vérifier 🎜🎜ici🎜🎜🎜. 🎜🎜🎜Utilisez l'attribut spécial slot sur <template> pour transmettre le contenu du parent à l'emplacement nommé (mettez Ici🎜 a mentionné le composant <base-layout> à titre d'exemple) :🎜rrreee 🎜Ou utilisez directement l'attribut slot sur un élément ordinaire : 🎜rrreee🎜Il y a en fait un emplacement sans nom ici, qui est le 🎜emplacement par défaut🎜, qui capture tout le contenu inégalé. Les résultats de rendu HTML des deux exemples ci-dessus sont : 🎜rrreee🎜🎜🎜

🎜avec slot-scope L'emplacement de portée de l'attribut 🎜🎜🎜🎜🎜 est obsolète depuis la version 2.6.0. Pour la nouvelle syntaxe recommandée, veuillez vérifier ici🎜. 🎜🎜Utilisez l'attribut spécial slot-scope sur <template> pour recevoir l'accessoire transmis au slot (mettez Ici 🎜 a mentionné le composant <slot-example> à titre d'exemple) : 🎜rrreee

Le slot-scope déclare ici que l'objet prop reçu existera dans la portée <template> en tant que variable slotProps. Vous pouvez nommer slotProps arbitrairement comme vous nommez les paramètres de fonction JavaScript. slot-scope 声明了被接收的 prop 对象会作为 slotProps 变量存在于 <template> 作用域中。你可以像命名 JavaScript 函数参数一样随意命名 slotProps。

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