Vue Slots
Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates
Scaling Up
Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API
Vue Reference
Vue Built-in Attributes Vue Built-in AttributesVue ‘is’ AttributeVue ‘key’ AttributeVue ‘ref’ Attribute Vue Built-in Components Vue Built-in Components<KeepAlive><Teleport><Transition><TransitionGroup> Vue Built-in Elements Vue Built-in Elements<component><slot><template> Vue Component Instance Vue Component Instance$attrs$data$el$parent$props$refs$root$slots$emit()$forceUpdate()$nextTick()$watch() Vue Directives Vue Directivesv-bindv-cloakv-forv-htmlv-ifv-else-ifv-elsev-memov-modelv-onv-oncev-prev-showv-slotv-text Vue Instance Options Vue Instance Optionsdatamethodscomputedwatchpropsemitsexpose Vue Lifecycle Hooks Vue Lifecycle HooksbeforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmountederrorCapturedrenderTrackedrenderTriggeredactivateddeactivatedserverPrefetch
Vue Examples
Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate ❮ PreviousNext ❯ Slots are a powerful feature in Vue that allow for more flexible and reusable components.
We use slots in Vue to send content from the parent into the <template> of a child component.
Slots
So far we have just used components inside <template> as self-closing tags like this:
App.vue:
<template> <slot-comp /> </template> Instead, we can use opening and closing tags, and put some content inside, like for example a text:
App.vue:
<template> <slot-comp>Hello World!</slot-comp> </template> But to receive ‘Hello World!’ inside the component and display it on our page, we need to use the <slot> tag inside the component. The <slot> tag acts as a placeholder for the content, so that after the application is built the <slot> will be replaced by the content sent to it.
Example
SlotComp.vue:
<template> <div> <p>SlotComp.vue</p> <slot></slot> </div> </template> Run Example » SlotComp.vue:
<template> <div> <p>SlotComp.vue</p> <slot></slot> </div> </template> Run Example »
Slots as Cards
Slots can also be used to wrap around larger chunks of dynamic html content to get a card-like appearance.
Earlier we have sent data as props to create content inside components, now we can just send the HTML content directly inside the <slot> tag as it is.
Example
App.vue:
<template> <h3>Slots in Vue</h3> <p>We create card-like div boxes from the foods array.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> <p>{{x.desc}}</p> </slot-comp> </div> </template> As the content enters the component where the <slot> is, we use a div around the <slot> and style the <div> locally to create a card-like appearance around the content without affecting other divs in our application.
SlotComp.vue:
<template> <div> <!– This div makes the card-like appearance –> <slot></slot> </div> </template> <script></script> <style scoped> div { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px; margin: 10px; } </style> Run Example » App.vue:
<template> <h3>Slots in Vue</h3> <p>We create card-like div boxes from the foods array.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> <p>{{x.desc}}</p> </slot-comp> </div> </template> As the content enters the component where the <slot> is, we use a div around the <slot> and style the <div> locally to create a card-like appearance around the content without affecting other divs in our application.
SlotComp.vue:
<template> <div> <!– This div makes the card-like appearance –> <slot></slot> </div> </template> <script></script> <style scoped> div { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px; margin: 10px; } </style> Run Example » Components that produce a card-like frame around content can be reused to create different elements, but with the same card-like frame around.
In this example we use the same component as for the food items to create a footer.
Example
App.vue:
<template> <h3>Reusable Slot Cards</h3> <p>We create card-like div boxes from the foods array.</p> <p>We also create a card-like footer by reusing the same component.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> </slot-comp> </div> <footer> <slot-comp> <h4>Footer</h4> </slot-comp> </footer> </template> Run Example » App.vue:
<template> <h3>Reusable Slot Cards</h3> <p>We create card-like div boxes from the foods array.</p> <p>We also create a card-like footer by reusing the same component.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> </slot-comp> </div> <footer> <slot-comp> <h4>Footer</h4> </slot-comp> </footer> </template> Run Example »
Fallback Content
If a component is created without content we can have fallback content in the <slot>.
Example
The first component in this application has no content provided, so the fallback content is rendered.
App.vue:
<template> <h3>Slots Fallback Content</h3> <p>A component without content provided can have fallback content in the slot tag.</p> <slot-comp> <!– Empty –> </slot-comp> <slot-comp> <h4>This content is provided from App.vue</h4> </slot-comp> </template> SlotComp.vue:
<template> <div> <slot> <h4>This is fallback content</h4> </slot> </div> </template> Run Example » The first component in this application has no content provided, so the fallback content is rendered.
App.vue:
<template> <h3>Slots Fallback Content</h3> <p>A component without content provided can have fallback content in the slot tag.</p> <slot-comp> <!– Empty –> </slot-comp> <slot-comp> <h4>This content is provided from App.vue</h4> </slot-comp> </template> SlotComp.vue:
<template> <div> <slot> <h4>This is fallback content</h4> </slot> </div> </template> Run Example »
Vue Exercises
❮ PreviousNext ❯ ★+1 W3schools PathfinderTrack your progress - it’s free! Log in Sign Up 
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:[email protected]
Report Error
If you want to report an error, or if you want to make a suggestion, send us an e-mail:[email protected]
HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples
LuckyLand Slots Review and Promotions. PLAY NOW and spin your way to big wins!
This site only collects related articles. Viewing the original, please copy and open the following link:Vue Slots
