Vue 具名插槽

有时候我们需要定义多个插槽，这时候就可以使用具名插槽，利用 slot 的 name 属性。
示例：
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

    <template v-slot:title>
      <strong>我是title</strong>
    </template>
    <template v-slot:context>
      <p>12345</p>
      <p>12345</p>
    </template>

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

    <header>
      <slot name="title" />
    </header>
    <main>
      <slot name="context" />
    </main>

渲染结果为：

    <header>
      <strong>我是title</strong>
    </header>
    <main>
      <p>12345</p>
      <p>12345</p>
    </main>

$
一个不带 name 的 <slot> 出口会带有隐含的名字“default”，即 v-slot:default
注意 v-slot 只能添加在 <template> 上。