26.Vue slot内容分发

简单来说，当父组件需要在子组件内放一些内容，那么这些内容是显示、不显示、在哪个地方显示、如何显示，通过slot分发显示。

1.slot定义：

  // 默认：name="default" 可简写
  <slot></slot> 
  // 定义插槽的名称 
  <slot name="hedaer"></slot> 

2.slot的使用

  <div>默认slot</div>
  <div slot="header">指定名称的slot</div>

3.案例：

3-1.子组件pagec.vue

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

3-2.使用slot插槽

<template>
  <div>
      <pagec>
          <footer slot="footer">这是底部</footer>
          <section >这是内容区域</section>
          <header="header">这是头部</header>
      </pagec>
  </div>
</template>
<script>
 // 导入子组件
 import pagec from './pagec'
 export default {
    data(){
      return {
      }
    },
    components:{
      pagec
    }
  }
</script>

结果：

这是头部
这是内容区域
这是底部

根据slot定义顺序展示，而非使用时传入顺序