Slots وScoped Slots

ما هي المنافذ؟

المنفذ الافتراضي

<!-- 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 }" -->

متى تستخدمون كل نوع من المنافذ؟

اختبار سريع

مراجعة: المنافذ