vue 之具名插槽

具名插槽

具名插槽就是起了名字的插槽。
有时我们需要多个插槽，例如当我们想使用某种通用模板：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

在向具名插槽提供内容时，可以在一个 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称

<template>
  <div>
    <p>我是A组件</p>
    <B>
      <template slot="header">
        <p>我是header部分</p>
      </template>
 
      <p>我是main（默认插槽）部分</p>
 
      <template slot="footer">
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>