What are some practical examples of using slots in Vue.js?

What are some practical examples of using slots in Vue.js?

Slots in Vue.js allow you to create reusable components with flexible content. For example, you can create a modal component that uses slots to allow different content to be injected into the modal body.

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

Sure! Here's a simple example:

<template>
  <div class="modal">
    <slot name="header"></slot>
    <div class="modal-body">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

How do I use this modal component in my app?

You can use the modal component like this:

<modal>
  <template v-slot:header>
    <h1>My Modal Title</h1>
  </template>
  <p>This is the content of the modal.</p>
  <template v-slot:footer>
    <button>Close</button>
  </template>
</modal>

What are the benefits of using slots?

Using slots enhances component reusability and flexibility, allowing you to create more dynamic and customizable components.