Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding a content inside of a vue component

Tags:

vue.js

vuejs2

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?

like image 622
ramazan793 Avatar asked Oct 14 '17 19:10

ramazan793


People also ask

How do you put a component inside another component in Vue?

You need to create your portfolio component first e.g. in src/components/Projects/Portfolio. vue and then import it inside the script tag within your Landing.


1 Answers

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.

like image 176
Bert Avatar answered Sep 27 '22 21:09

Bert