vue具名插槽

具名插槽：一个页面的内容被传入到另一个页面中
1:在父组件中分每一部分，每一部分<slot name="header"></slot>指定名称，等着传值。
2：子组件引入父组件，并指定传到父组件的哪一部分<template v-slot:header><h1>头部区域</h1> </template>，不指定传入父组件哪一部分，就传入默认部分。

父组件：

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script>
export default {}
</script>
<style></style>

子组件：

<template>
  <div id="app">
    <layout>
      <template v-slot:header>
        <h1>头部区域</h1>
      </template>
<!--没有指定插槽名称，放在默认插槽中-->
      <div><p>主体内容</p></div>
      <template v-slot:footer>
        <h1>底部区域</h1>
      </template>
    </layout>
  </div>
</template>
<script>
import Layout from "./Layout";
export default {
  components: {Layout}
}
</script>
<style></style>