สล็อตและสล็อตแบบมีขอบเขต

สล็อตคืออะไร

สล็อตเริ่มต้น

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

การใช้สล็อตเริ่มต้น

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

เนื้อหาสำรองของสล็อต

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

สล็อตที่มีชื่อหลายช่อง

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

การเติมข้อมูลในสล็อตที่มีชื่อ

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

รูปแบบย่อของ v-slot

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

สล็อตแบบมีขอบเขต

การเปิดเผยข้อมูลจากคอมโพเนนต์ลูก

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

การใช้ข้อมูลจากสล็อตแบบมีขอบเขต

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

ควรใช้สล็อตแต่ละแบบเมื่อใด

ตรวจสอบความเข้าใจ

ทบทวน: สล็อต