# slot 的用法 ( 可以取代的元件 )
###### tags: `學習 Vue`

## 基本用法: 基本直接完全取代
### 組件(component) 檔案中的 slot

<slot name="header-content"
      v-bind:hide-function="hide">
    {{regulatedHeaderText}}
</slot>

### 在別的地方使用該 slot

<template v-slot:header-content>
    <div>
        <span>aaaa</span>
    </div>
</template>

## 進階用法: 可以使用 slot 原本設計的欄位 ( Ex. 在標題文字後方加上後贅詞 )
### 組件(component) 檔案中的 slot
為了提供使用此 slot 的使用者去使用 regulatedHeaderText 欄位的字串
將資料綁定成 header-text

<slot name="header-content"
      v-bind:hide-function="hide"
      v-bind:header-text="regulatedHeaderText">
    {{regulatedHeaderText}}
</slot>

### 在別的地方使用該 slot
用 template v-slot:slot名字="slot提供的Property"
※ Property 中也可以放 Function 欄位哦 !

<template v-slot:header-content="slotProps">
       {{slotProps.headerText}} (Suffix)
</template>