簡(jiǎn)單來(lái)說(shuō)，當(dāng)父組件需要在子組件內(nèi)放一些內(nèi)容，那么這些內(nèi)容是顯示、不顯示、在哪個(gè)地方顯示、如何顯示，通過(guò)slot分發(fā)顯示。

1.slot定義：

  // 默認(rèn)：name="default" 可簡(jiǎn)寫
  <slot></slot> 
  // 定義插槽的名稱 
  <slot name="hedaer"></slot> 

2.slot的使用

  <div>默認(rèn)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 >這是內(nèi)容區(qū)域</section>
          <header="header">這是頭部</header>
      </pagec>
  </div>
</template>
<script>
 // 導(dǎo)入子組件
 import pagec from './pagec'
 export default {
    data(){
      return {
      }
    },
    components:{
      pagec
    }
  }
</script>

結(jié)果：

這是頭部
這是內(nèi)容區(qū)域
這是底部

根據(jù)slot定義順序展示，而非使用時(shí)傳入順序