先說一下個人理解：vue頁面的組成主要靠父子元件的組合，而父子元件之間內容和訊息的傳遞主要靠的是slot props emit等實現。
從子元件向不向slot中傳遞資料的角度來看，插槽主要分為不帶資料的插槽和帶資料的插槽，而不帶資料的插槽又可以分為匿名插槽/單個插槽/預設插槽和具名插槽的，當然帶資料的插槽同樣也可以分為上面兩種插槽。

1. 不帶資料的插槽

• 匿名插槽/預設插槽/單個插槽

<template>
    <div class="father">
        <h3>這裡是父元件</h3>
        <child>
            <div class="tmpl">
              <span>選單1</span>
              <span>選單2</span>
              <span>選單3</span>
              <span>選單4</span>
              <span>選單5</span>
              <span>選單6</span>
            </div>
        </child>
    </div>
</template>

<template>
    <div class="child">
        <h3>這裡是子元件</h3>
        <slot></slot>
    </div>
</template>
 

這類插槽子元件中只能有一個，多了會報以下duplicate presence重複存在的錯誤。以上例子中的slot標籤負責將父元件中的內容傳遞到子元件中來。

• 具名插槽

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>選單1</span>
        <span>選單2</span>
        <span>選單3</span>
        <span>選單4</span>
        <span>選單5</span>
        <span>選單6</span>
      </div>
  </div>
</template>

<template>
  <div class="child">
  	<h3>這裡是子元件</h3>
    <slot name="up"></slot>
  </div>
</template>
 

這類插槽子元件中可以有多個，通過name來進行區分。

2. 帶資料的插槽

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
  </div>
</template>

<template>
  <div class="child">
    <h3>這裡是子元件</h3>
    <slot  :data="data"></slot>
  </div>
</template>

<script>
  export default {
      data: function(){
        return {
          data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
        }
      },
  }
</script>
 

這裡以匿名插槽為例，對於這類帶資料的插槽，父元件通過slot-scope來獲取子元件中傳遞過來的資料，從而實現了父元件僅可以控制子元件插槽中的樣式，而其中的內容由父子元件共同決定。

總結： 父子元件的組合實現了頁面的模組化，而slot/props/emit等實現了各個模組之間內容和訊息的傳遞，具體通過何種方式，內容分發？這個以後再深入思考。通過slot，父元件實現了對子元件插槽樣式的控制，而內容則由父子附件共同決定。

參考：https://juejin.im/post/5a69ece0f265da3e5a5777ed#comment