[JavaScript知识库]插槽废弃了的语法（ slot 和 slot-scope）

v-slot?指令自 Vue 2.6.0 起被引入，提供更好的支持?slot?和?slot-scope?attribute 的 API 替代方案。v-slot?完整的由来参见这份?RFC。在接下来所有的 2.x 版本中?slot?和?slot-scope?attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

?带有?slot?attribute 的具名插槽

自 2.6.0 起被废弃。新推荐的语法请查阅这里（具名插槽）。

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

<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?attribute 用在一个普通元素上：

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

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

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

带有?slot-scope?attribute 的作用域插槽

自 2.6.0 起被废弃。新推荐的语法请查阅这里（作用域插槽）。

在?<template>?上使用特殊的?slot-scope?attribute，可以接收传递给插槽的 prop (把这里提到过的?<slot-example>?组件作为示例)：

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

这里的?slot-scope?声明了被接收的 prop 对象会作为?slotProps?变量存在于?<template>?作用域中。你可以像命名 JavaScript 函数参数一样随意命名?slotProps。

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

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

slot-scope?attribute 也可以直接用于非?<template>?元素 (包括组件)：

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

slot-scope?的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。这意味着在支持的环境下 (单文件组件或现代浏览器)，你也可以在表达式中使用?ES2015 解构，如下：

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

使用这里描述过的?<todo-list>?作为示例，与它等价的使用?slot-scope?的代码是：

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