摘要

作用域插槽是一種特殊的插槽，它允許子元件在渲染插槽時，將自身的資料傳遞給父元件的插槽內容使用。這打通了從子到父的資料傳遞通道，讓插槽內容可以存取子元件的狀態。

定義與說明

子元件可以在 <slot> 標籤上，像綁定 props 一樣綁定屬性，這些屬性會被傳遞出去。在父元件中，v-slot 指令可以接收一個值（例如 v-slot="slotProps" 或 #default="slotProps"），這個 slotProps 就是一個包含了所有從子元件傳遞過來的屬性的物件。父元件的插槽模板就可以使用這個物件中的資料。

實作範例

UserList.vue (子元件，擁有資料)

<script setup>
import { ref } from 'vue';
const users = ref([
  { id: 1, name: 'Jake', email: 'jake@test.com' },
  { id: 2, name: 'Eason', email: 'eason@test.com' }
]);
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <!-- 將 user 物件作為屬性綁定到 slot 上 -->
      <slot :user-data="user"></slot>
    </li>
  </ul>
</template>

Parent.vue (父元件，定義如何顯示資料)

<template>
  <UserList>
    <!-- 接收從子元件傳來的 props，並命名為 slotProps -->
    <template #default="slotProps">
      <!-- 使用 slotProps 來存取子元件的 user-data -->
      <div>
        <strong>{{ slotProps.userData.name }}</strong>
        ({{ slotProps.userData.email }})
      </div>
    </template>
  </UserList>
</template>

結論

作用域插槽是 Vue 插槽系統中最强大、最靈活的部分。它徹底顛覆了「資料只能從父到子」的限制，讓父元件可以「反向」地從子元件獲取資料來客製化插槽內容，是實現高度可複用且邏輯解耦的列表類元件的終極武器。

作用域插槽資料傳遞解耦