（一）前言

vue程式碼中的 slot 是什麼，簡單來說就是插槽。<slot>元素作為元件模板之中的內容分發插槽，傳入內容後<slot>元素自身將被替換。

看了上面這句官方解釋，可能一樣不知道 slot 指的是什麼，那麼就來看看在vue中，什麼時候你需要用到 slot 。

舉例：一個元件的展示層你需要做到大體結構固定，但其內的部分結構可變，樣式表現不固定。例如 Button 中是否顯示 icon，或者 Modal 框的中間內容展示區域的變化等，要通過子元件自己實現是不可能的。元件並不直接支援htmlDOM 結構的傳遞，此時就可以通過使用slot作為html結構的傳遞入口來解決問題。

（二）v-slot 用法

在 2.6.0 版本中，Vue 為具名插槽和作用域插槽引入了一個新的統一的語法（即<v-slot>指令）。它取代了slot和slot-scope這兩個目前已被廢棄、尚未移除，仍在文件中的特性。

使用方法可以分為三類：預設插槽、具名插槽以及作用域插槽。

◎ 預設插槽

子元件編寫：在元件中新增<slot>元素，來確定渲染的位置。

// 子元件
  <template>
    <div class="content">
      <!-- 預設插槽 -->
      <header class="text">
        <!-- slot 的後備內容：為一個插槽設定具體後備（預設）內容是很有用的，當父元件不新增任何插槽內容時，預設渲染該後備內容的值。 -->
        <slot>預設值</slot>
      </header>
    </div
 
>
  </template>

父元件編寫：任何沒有被包裹在帶有 v-slot 的<template>中的內容都會被視為預設插槽的內容。當子元件只有預設插槽時，<v-slot>標籤可以直接用在元件上，也就是獨佔預設插槽的寫法

// 父元件
<template>
  <div class="container">
    <!-- 預設插槽-->
    <child>
      任意內容
      <template>內容</template>
      中間內容
      <!-- <template v-slot:default>但如果你定義了 default 之後，其他內容就不會出現了，原理同上，不能重複定義</template> -->
    </child>

    <!-- 獨佔預設插槽的縮寫 -->
    <child v-slot="slotProps">
      當只有預設插槽時，此為獨佔預設插槽的縮寫<br>
      如果元件中有其他具名插槽，這麼寫會報錯<br>
      slotProps 取的是，子元件標籤 slot 上屬性資料的集合
    </child>
  </div>
</template>
 

◎ 具名插槽

子元件編寫：當需要使用多個插槽時，為<slot>元素新增name屬性，來區分不同的插槽，當不填寫 name 時，預設為 default 預設插槽。

// 子元件
  <template>
    <div class="content">
      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>
      <footer class="text">
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>

父元件編寫：<template>標籤中新增v-slot:xxx或者#xxx屬性的內容， # 代表插槽的縮寫。

// 父元件
<template>
  <div class="container">
    <!-- 具名插槽使用 -->
    <child>
      <template v-slot:main>
        <a href="https://www.zcygov.cn" target="_blank">導航</a>
      </template>
      <template #footer>頁尾（具名插槽的縮寫#）</template>
      <template #footer>
        <!--  v-slot 重複定義同樣的 name 後只會載入最後一個定義的插槽內容 -->
        v-slot只會新增在一個 template 上面
      </template>
    </child>
  </div>
</template>

◎ 作用域插槽

子元件編寫：有時讓父元件能訪問到子元件中的資料是很有用的，我們可以將繫結在<slot>元素上的特性稱為插槽 Prop，當然也可以傳遞一些Function。

// 子元件
  <template>
    <div class="content">
      <!-- 作用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>

  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    },
    methods:{
      testClick(){
          // 子元件通用方法，可傳遞給父元件複用
        alert('123');
      }
    }
  };
  </script>

父元件編寫：被繫結的屬性的集合物件，在父元素中會被v-slot:xxx="slotProps"或者#xxx="slotProps"接收，xxx 代表具名插槽的name，slotProps 為子元件傳遞的資料物件，可以重新命名。

// 父元件
<template>
  <div class="container">
    <!-- 作用域插槽，以及解構插槽 Prop 的寫法 -->
    <child>
      <template #footer="slotProps">
        {{slotProps.user.title}}
        <button @click="slotProps.testClick">點我</button>
      </template>
      <template #footer="{user,testClick}">
        {{user.title}}<br>
        此為解構插槽prop<br>
        <!-- 子元件中的通用方法，可傳遞給父元件複用 -->
        <button @click="testClick">點我</button>
      </template>
    </child>
  </div>
</template>

<script>
import Child from './component/child.vue';
export default {
  name: 'demo',
  components: {
    Child
  },
};
</script>

◎ 其他拓展

v-slot="{ user: person }"
v-slot="{ user = { name: 'Guest' } }"
v-slot:[dynamicSlotName]

◎ 注意事項

• v-slot只能用在template上面，或者是獨佔預設插槽的寫法。

• 父元件引用時 ，重複定義了v-slot的name後只會載入最後一個定義的插槽內容。

• 當子元件只有預設插槽時，才可以使用獨佔預設插槽的縮寫語法，只要出現多個插槽，必須使用完整的基於template的語法。

PPT模板下載大全https://www.wode007.com

（三）slot 以及 slot-scope 的用法

介紹完 v-slot 的基本用法，這裡我們也順帶介紹一下之前的slot和slot-scope的用法以及區別。

◎ 子元件編寫

子元件的編寫方式沒什麼區別，下面是一個集合

// 子元件
  <template>
    <div class="content">
      <!-- 預設插槽 -->
      <header class="text">
        <slot>預設值</slot>
      </header>

      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>

      <!-- 作用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>

  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    }
  };
  </script>

◎ 父元件編寫

• 具名插槽：直接使用slot屬性，傳值為子元件插槽的name屬性。

• 作用域插槽：通過slot-scope屬性來接受子元件傳入的屬性集合，其他用法一致。

// 父元件
<template>
  <div class="container">
    <child>
      <!-- 預設插槽 -->
      <div>預設插槽</div> 

      <!-- 具名插槽 -->
      <div slot="main">具名插槽</div>
      <div slot="main">具名插槽2</div>

      <!-- 作用域插槽 -->
      <div slot="footer" slot-scope="slotProps">
        {{slotProps.user.title}}
      </div>
    </child>
  </div>
</template>

<script>
import Child from './component/child.vue';
export default {
  name: 'demo',
  components: {
    Child
  },
};
</script>

◎ 需要注意

• 不同於v-slot的是，slot中同名可以重複定義多次。

• slot可以直接定義在子元件上。

• v3.0 版本後不可使用slot，建議直接使用v-slot。

（四）總結

• 插槽的<slot>的可複用特性，可以用來寫一些元件結構固定，內容可替換的元件，例如表格，列表，按鈕，彈窗等內容。
• 插槽可以傳遞屬性值或者function的特性，可以在子元件中寫一些通用的函式，例如通用的報錯提示等，傳遞給父元件複用。