Содержимое слота

Vue реализует API распределения контента используя элемент <slot> в качестве точек распространения контента.

Например, это позволит составлять такие компоненты:

<navigation-link url="/profile">
  Ваш профиль
</navigation-link>

Для этого шаблон <navigation-link> должен быть например таким:

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

При отрисовке компонента <slot></slot> будет заменён на «Ваш профиль». Слоты могут содержать любой код шаблона, в том числе HTML:

<navigation-link url="/profile">
  <!-- Добавляем иконку из набора Font Awesome -->
  <span class="fa fa-user"></span>
  Ваш профиль
</navigation-link>

Или даже другие компоненты:

<navigation-link url="/profile">
  <!-- Используем компонент для добавления иконки -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Ваш профиль
</navigation-link>

Если шаблон <navigation-link> не содержит элемент <slot>, любой переданный контент будет просто проигнорирован.