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

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

Slots in Vue.js allow you to create reusable components with flexible content. For example, you can use named slots to pass different content to a component.

Can you show me a simple code example?

Sure! Here's a basic example:

<template>
  <my-component>
    <template v-slot:header>
      <h1>This is the header</h1>
    </template>
    <template v-slot:default>
      <p>This is the default content.</p>
    </template>
  </my-component>
</template>

<script>
export default {
  components: {
    MyComponent
  }
}
</script>

What if I want to use multiple slots?

You can define multiple named slots in your component. For example:

<template>
  <my-component>
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <template v-slot:footer>
      <footer>Footer content</footer>
    </template>
  </my-component>
</template>