在vue组件内添加内容

Question

我有一个vue组件Jumbotron.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>

但我不能向jumbotron添加内容,因为它错了.我不想在Jumbotron.vue中添加内容(p和h1),因为我想在其中使用不同内容的Jumbotron.vue超过1次.这可能吗？

Answer 1

这是通过插槽完成的.

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

放在jumbotron父组件中的所有内容都将在插槽中呈现.