Vue 具名插槽

假设子组件 layout ：

<div>
  <div>content</div>
</div>

父组件使用子组件：

<layout></layout>

页面展示效果为：

content

如果我想让父组件显示：

header
content
footer

即：在父组件写了header与footer的div，想在中间的content部分使用子组件即可。很容易想到，使用插槽 ：

<!--父组件-->
<layout>
  <div>header</div>
  <div>footer</div>
</layout>

<!--子组件-->
<div>
  <slot></slot>
  <div>content</div>
</div>

很可惜，出来的效果是这样的：

header
footer
content

很正常，因为slot是一整块的，当然是上面的效果。这时候就要使用 具名插槽 来将slot分为几小块，分别插在前面和后面：

<!--父组件-->
<layout>
  <template v-slot:header> <!--用v-slot来绑定子组件中的name-->
    <div>header</div>  <!--注意，v-slot要写在template，写在div的话会报错，即是规定也利于语义化-->
  </template>
  <template v-slot:footer>
    <div>footer</div>
  </template>
</layout>

<!--子组件-->
<div>
  <slot name="header"></slot> <!--用name属性取名-->
  <div>content</div>
  <slot name="footer"></slot>
</div>

完成效果~

header
content
footer

小知识： v-slot 可简写成 # ，即：

<layout>
  <template #header>
    <div>header</div>
  </template>
  <template #footer>
    <div>footer</div>
  </template>
</layout>