What are some examples of using slots in Vue 3?

What are some examples of using slots in Vue 3?

In Vue 3, slots allow you to create reusable components with flexible content. For example, you can create a modal component that uses slots to customize its header and body.

Can you show me a code example of a slot in a modal?

Sure! Here's a simple example:

<template>
  <Modal>
    <template #header>
      <h1>My Modal Header</h1>
    </template>
    <template #body>
      <p>This is the body of the modal.</p>
    </template>
  </Modal>
</template>

What are named slots and how do they differ from default slots?

Named slots allow you to define multiple slots in a component, giving you more control over where content is placed. Default slots are used when no name is specified.

Can I use v-for with slots?

Yes, you can use v-for with slots to render multiple items. Just ensure that the slot is defined correctly to accept the repeated content.