摘要

插槽（Slots）是 Vue 中一個強大的內容分發機制，它允許父元件向子元件傳遞 HTML 內容。這種機制讓元件更加靈活，可以根據不同場景顯示不同的內容結構。

定義與說明

插槽的作用：

插槽讓我們能夠：

• 向子元件傳遞 HTML 內容
• 讓子元件決定內容的放置位置
• 實現更靈活的元件組合

基本用法：

子元件使用 <slot> 標籤定義插槽位置，父元件在使用子元件時，可以在開始和結束標籤之間放置任何內容，這些內容會被插入到子元件的插槽位置。

實作範例

Card.vue (子元件)

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">
        
        <h3>預設標題</h3>
      </slot>
    </div>

    <div class="card-body">
      <slot>
        
        <p>這裡是預設內容</p>
      </slot>
    </div>

    <div class="card-footer">
      <slot name="footer">
        
        <button>預設按鈕</button>
      </slot>
    </div>
  </div>
</template>

App.vue (父元件)

<template>
  <Card>
    
    <template v-slot:header>
      <h2>我的卡片</h2>
    </template>

    
    <p>這是一些自訂內容</p>

    
    <template #footer>
      <button>確認</button>
      <button>取消</button>
    </template>
  </Card>
</template>

結論

插槽機制讓元件的內容組合變得更加靈活。透過預設插槽和具名插槽，我們可以創建高度可複用的元件模板，同時保持對內容的完全控制。這是實現元件靈活性和可維護性的重要工具。

插槽內容分發元件組合