Slots

You can pass content to a component using a slot

Basic Slot

Outputting a profile component

<profile url="/profile">
  Shane Prendergast
</profile>

Within the actual profile component (profile.vue)

<a v-bind:href="url">
  <slot></slot>
</a>

Outputs

<a href="/profile">
  Shane Prendergast
</a>

Slots can contain any code, including HTML and other components. If no {% ihighlight html %} {% endihighlight %} is defined, any content passed into the component would be discarded.

Named Slots

Profile component (profile.vue)

<div>

  <div class="profile__name">
    <slot name="name"></slot>
  </div>

  <slot></slot>

  <div class="profile__contact">
    <slot name="contact"></slot>
  </div>

</div>

Using the profile card component with the slots, notice how you can either use {% ihighlight html %}