> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/komponenty/sloty/soderzhimoe-slota.md).

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

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

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

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

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

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

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

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

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

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

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