vue 구성 요소 내부에 컨텐츠 추가

vue 구성 요소 내부에 컨텐츠 추가

뷰 컴포넌트 점보트론이 있어요vue:

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

    </div>
  </div>
</template>

기타 페이지 구성 요소 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>

하지만 점보트론에 콘텐츠를 추가할 수 없습니다. 왜냐하면 그것은 잘못되었기 때문입니다.점보트론 안에 콘텐츠(p와 h1)를 추가하고 싶지 않습니다.뷰, 점보트론을 쓰고 싶기 때문입니다.여러 가지 콘텐츠가 포함된 vue를 두 번 이상 반복해야 합니다.이게 가능합니까?

이 작업은 슬롯에서 수행합니다.

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

여기에 넣는 모든 것jumbotron부모 컴포넌트가 슬롯에 렌더링됩니다.

언급URL : https://stackoverflow.com/questions/46748669/adding-a-content-inside-of-a-vue-component