• 废弃了的语法
    • 带有 slot 特性的具名插槽
    • 带有 slot-scope 特性的作用域插槽

    废弃了的语法

    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> 组件作为示例)：

    1. <base-layout>
    2.   <template slot="header">
    3.     <h1>Here might be a page title</h1>
    4.   </template>
    6.   <p>A paragraph for the main content.</p>
    7.   <p>And another one.</p>
    9.   <template slot="footer">
    10.     <p>Here's some contact info</p>
    11.   </template>
    12. </base-layout>

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

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

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

    1. <div class="container">
    2.   <header>
    3.     <h1>Here might be a page title</h1>
    4.   </header>
    5.   <main>
    6.     <p>A paragraph for the main content.</p>
    7.     <p>And another one.</p>
    8.   </main>
    9.   <footer>
    10.     <p>Here's some contact info</p>
    11.   </footer>
    12. </div>

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

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

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

    1. <slot-example>
    2.   <template slot="default" slot-scope="slotProps">
    3.     {{ slotProps.msg }}
    4.   </template>
    5. </slot-example>

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

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

    1. <slot-example>
    2.   <template slot-scope="slotProps">
    3.     {{ slotProps.msg }}
    4.   </template>
    5. </slot-example>

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

    1. <slot-example>
    2.   <span slot-scope="slotProps">
    3.     {{ slotProps.msg }}
    4.   </span>
    5. </slot-example>

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

    1. <slot-example>
    2.   <span slot-scope="{ msg }">
    3.     {{ msg }}
    4.   </span>
    5. </slot-example>

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

    1. <todo-list v-bind:todos="todos">
    2.   <template slot="todo" slot-scope="{ todo }">
    3.     <span v-if="todo.isComplete">✓</span>
    4.     {{ todo.text }}
    5.   </template>
    6. </todo-list>