在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

这是通过slots完成的。

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

您放入父级jumbotron组件内的所有内容都将在插槽中呈现。