vue中具名插槽的使用

具名插槽

##当使用多个插槽时，可以使用具名插槽

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
    <slot name="header"></slot>
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
    <slot name="main"></slot>
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
    <slot name="footer"></slot>
  </footer>
</div>

//需要插槽的内容

<base-layout>
  <template slot:header>
    <h1>Here might be a page title</h1>
  </template>
  <template>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
  <template slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

我使用<template v-slot:header></template>插槽内容不显示，暂时还没找到原因。先这样使用着吧！