Slots

In Vue.js, a slot is a place where a component can inject content. This allows for greater flexibility in the structure and layout of a component.

Default Slot

The default slot is used when a component does not have a named slot. This slot can be used to pass content to the component that will be rendered in the default location.

<template>  <div>    <h1>My Component</h1>    <slot></slot>  </div></template><script>export default {  name: 'MyComponent'}</script>

In this example, any content passed to the MyComponent component will be rendered in the location of the <slot></slot> element.

Named Slots

Named slots allow for more specific placement of content within a component. To create a named slot, you must give the slot element a name attribute.

<template>  <div>    <h1>My Component</h1>    <slot name="header"></slot>    <slot name="footer"></slot>  </div></template><script>export default {  name: 'MyComponent'}</script>

In this example, content passed to the MyComponent component with the header slot attribute will be rendered in the location of the <slot name="header"></slot> element, and content passed to the MyComponent component with the footer slot attribute will be rendered in the location of the <slot name="footer"></slot> element.

Scoped Slots

Scoped slots allow for more dynamic content injection, by passing a function to the slot. The function receives an object with any passed props, and should return a template.

<template>  <div>    <h1>My Component</h1>    <slot :item="item" v-bind="item"></slot>  </div></template><script>export default {  name: 'MyComponent',  props: ['item']}</script>

<template>  <my-component :item="item">    <template v-slot:default="slotProps">      <div>        <h2>{ { slotProps.item.title } }</h2>        <p>{ { slotProps.item.description } }</p>      </div>    </template>  </my-component></template>

In this example, the parent component will pass down an object slotProps to the scoped slot, and the slotProps object will contain the item data and any other data passed to the slot.

Slot Props

You can also pass props to a slot, which allows for more dynamic content injection

<template>  <div>    <h1>My Component</h1>    <slot :item="item" v-bind="item"></slot>  </div></template><script>export default {  name: 'MyComponent',  props: ['item']}</script>

In this example, the MyComponent component has a prop called item which is passed to the slot with the attribute. The v-bind="item" attribute binds all properties of the item object to the slot.

In the parent component, you can access these props by using the v-slot directive and specifying the name of the slot.

<template>  <my-component :item="item">    <template v-slot:default="slotProps">      <div>        <h2>{ { slotProps.item.title } }</h2>        <p>{ { slotProps.item.description } }</p>      </div>    </template>  </my-component></template>

In this example, the slotProps object passed to the scoped slot contains the item prop passed to the MyComponent component, and the parent component can access the properties of the item object using the slotProps.item syntax.

It's important to note that you can use the shorthand syntax for v-slot as well, where you just use the # sign instead of v-slot:default, and v-slot instead of template:

<my-component :item="item">    <div #default="slotProps">        <h2>{ { slotProps.item.title } }</h2>        <p>{ { slotProps.item.description } }</p>    </div></my-component>