在 Vue 的開發過程中，元件化設計能讓程式碼更好維護與重複使用。不過，光有「元件」還不夠，因為很多時候我們希望在元件裡「保留一個位置」，讓父層可以依照需求去插入不同的內容。這時候，插槽 (slot) 就派上用場了。

Vue 從 2.6 開始提供了統一語法 v-slot，不僅讓插槽的使用更直觀，也支援「作用域插槽 (scoped slot)」，能夠把子元件的資料回傳給父元件，增加元件之間的彈性與互動性。

v-slot 是 Vue 2.6+ 和 Vue 3 用來定義「插槽內容」的語法，主要用於元件之間的內容分離與重用，就像「預留一個空位」，讓你決定要在這個空位放什麼內容，像是「元件遞便條給你，你可以用上面的資訊」，這張便條紙，還可以層層傳遞，也就是說 v-slot中還可加入其他元件，並且帶著元件父層元件資料往下使用。

<myNotes>
  <template v-slot:default="{ user }">
    <div>名字：{{ user.name }}</div>
  </template>
</myNotes>

接下來，用一個簡單的案例示範如何利用 v-slot 在文字輸入框中嵌入一個小按鈕，讓使用者能一鍵清空輸入的資料。

圖20-1：文字輸入框紅框處加入 icon

1. script 區域
   2. 增加 DepositoryNM：用來雙向綁定文字輸入框的數值。
   3. 增加 cleanDepository()：用於清除 DepositoryNM 的數值。

const DepositoryNM = ref('');
const cleanDepository= () => {
  DepositoryNM.value = '';
};

2. template 區塊
   3. 在 <v-text-field> 中加入 v-slot，並透過參數 append-inner 將自訂內容插入輸入框右側。
   4. 在 <template> 中加入 <v-btn> 元件，作為 icon button。
   5. <v-btn> 按鈕需綁定對應的 click 事件，用以清除雙向綁定的 DepositoryNM 數值。

<template>
      <v-text-field color="primary" class="mb-4" aria-label="保管人"
        v-model="DepositoryNM" label="保管人" placeholder="請輸入保管者姓名"
        variant="outlined" readonly>
        <template v-slot:append-inner>
          <v-btn icon size="small" color="primary" variant="text" @click="cleanDepository" title="清除">
            <SvgSprite name="custom-trash" style="width: 20px; height: 20px" />
          </v-btn>
        </template>
      </v-text-field>
</template>

驗證效果

圖20-2：透過 v-slot，可將 icon button 成功內嵌於文字輸入框中。

圖20-3：點選 icon button 會觸發綁定的 cleanDepository()，將輸入欄位的值清空。

圖20-4：清空文字框。