Adding a content inside of a vue component

Question

I have a vue component Jumbotron.vue:

<template lang="html"> <div class="jumbotron" style="border-radius:0px; color:#fff;"> <div class="container"> </div> </div> </template>

And other page component Main.vue:

<template> <div class="root"> <navbar></navbar> <jumbotron> <h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1> <p class="lead ">Like this paragraph</p> </jumbotron> <words></words> </div> </template>

But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?

tony19 · Accepted Answer · 2022-07-15 19:57:26Z

30

This is done with slots.

<template lang="html"> <div class="jumbotron" style="border-radius:0px; color:#fff;"> <div class="container"> <slot></slot> </div> </div> </template>

Everything you put inside the jumbotron component in the parent will be rendered in the slot.

edited Jul 15, 2022 at 19:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 14, 2017 at 20:11

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin Carlsson Over a year ago

Given link is for Vue 2 docs. Alternative link for Vue 3 docs on slots: vuejs.org/guide/components/slots.html#slots

Collectives™ on Stack Overflow

Adding a content inside of a vue component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related