игровые автоматы

Как и в других уроках в расширенной серии статей, которые мы рассмотрели до сих пор, урок по основам компонентов является весьма полезным.

Когда был выпущен Vue 2.6.0, Vue ввел новый унифицированный синтаксис (директива v-slot) для именованных и областей действия. Он заменил атрибуты slot и slot-scope, которые устарели, но не удалены, они все еще являются документами.

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

Vue реализует API распространения контента, который вдохновлен проектом спецификации веб-компонентов, с использованием элемент, служащий в качестве точек распространения контента.

Это позволяет нам составлять компоненты, как показано ниже:

<navigation-link url="/profile">
  Your Personal Profile
</navigation-link>

И в шаблоне для <navigation-link> мы могли бы иметь:

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

Когда рендеринг компонента выше, будет заменен на «Ваш личный профиль». Код слота может быть любым кодом шаблона, включая HTML:

<navigation-link url="/profile">
  <!-- Add a Font Awesome icon -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

Область компиляции

Когда мы хотим использовать данные внутри слота, как в случае ниже:

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

Слот должен иметь те же свойства экземпляра (ту же область действия), что и остальная часть шаблона. У него нет доступа к области действия <mnavigation-link>. Например, попытка доступа к URL не будет работать:

<navigation-link url="/profile">
  Clicking here will redirect you to: {{ url }}
  <!--
The `url` will return undefined, because the content is passed
  _to_ <navigation-link>, instead of being defined _inside_ the
  <navigation-link< component.
  -->
</navigation-link>

Резервный контент

В некоторых случаях полезно указывать запасной контент для слота, он будет отображаться только тогда, когда контент не предоставляется. Возьмем, к примеру, компонент <submit-button>:

<button type="submit">
  <slot></slot>
</button>

Добавить «отправить» как запасной контент, который будет отображаться внутри кнопки чаще всего. Мы должны поместить его между необходимыми тегами <slot>:

<button type="submit">
  <slot>Submit</slot>
</button>

Следовательно, запись <submit-button> </ submit-button> отобразит «submit». Однако, когда мы пишем <submit-button> save </ submit-button>, вместо этого будет отображаться предоставленный контент («save»).

Именованные слоты

Иногда полезно иметь несколько слотов. Как в компоненте <base-layout> с этим шаблоном:

<div class="container">
  <header>
    <!-- header content goes here -->
  </header>
  <main>
    <!--Main content goes here -->
  </main>
  <footer>
    <!-- footer content lives here -->
  </footer>
</div>

В таких случаях дополнительные слоты могут быть определены с помощью специального атрибута <slot> name:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Любая розетка <slot>, которая не имеет атрибута name, неявно имеет имя «default»

Scoped Слоты

Временами бывает полезно, чтобы содержимое слота получало доступ к данным, которые доступны только в дочернем компоненте. Например, для компонента <current-user>, который имеет следующий шаблон:

<span>
  <slot>{{ user.lastName }}</slot>
</span>

Если мы хотим сделать пользователя доступным для родительского слота, мы должны связать пользователя как атрибут с элементом <slot>:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

Когда мы связываем атрибуты с элементом <slot>, они называются слотами. Таким образом, мы можем использовать v-slot со значением, чтобы определить имя для предоставленных нам реквизитов слота в родительской области:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

Сокращенный синтаксис для одиночных слотов по умолчанию

Тег компонента может быть использован в качестве шаблона слота, если контент предоставляется только по умолчанию. Это позволит нам использовать v-slot непосредственно на компоненте:

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

Однако использование v-слота без аргумента будет ссылаться на слот по умолчанию:

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

Однако обратите внимание, что сокращенный синтаксис слотов не может быть смешан с именованными слотами, это приведет к

неясность При наличии нескольких слотов используйте синтаксис full & template> based для всех слотов.

Разрушение Слот Реквизит

Слоты Scoped работают внутренне, оборачивая содержимое нашего слота в функцию, которой передается один аргумент:

function (slotProps) {
  // ... slot content ...
}

По сути, это означает, что значение v-slot может принимать практически любое выражение JavaScript.

Динамические имена слотов

Начиная с версии 2.6.0, аргумент динамической директивы одинаково работает с v-slot, что позволяет определять имена динамических слотов:

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

Сокращения именованных слотов

Это также пришло с версией 2.6.0. Точно так же, как v-bind и v-on, v-слот также имеет сокращение, он заменяет все перед аргументом (v-slot:) символом #. Например, заголовок v-slot: можно записать как #header.

Но это сокращение доступно только при условии аргумента. Таким образом, следующий синтаксис недопустим:

<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

Но синтаксис ниже действителен:

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

Потому что вы указали имя слота при использовании сокращения.

Другие примеры

Слот-реквизиты помогают нам превращать слоты в повторно используемые шаблоны, которые могут отображать различный контент на основе входных реквизитов.

Это полезно при реализации компонента <todo-list>, который содержит макет и логику для фильтрации списка. В таких случаях вместо жесткого кодирования содержимого для каждой задачи мы могли бы предоставить родительскому компоненту возможность управлять, сделав все задачи слотом, а затем связав задачу как пропозицию слотов.

Именованные слоты с атрибутом слота

Эта функция устарела в 2.6.0. мы используем специальный атрибут слота в <template>, чтобы передать содержимое в именованные слоты от родителей.

Или вы можете напрямую использовать атрибут slot для обычного элемента.

Слоты в области видимости с атрибутом объема слота

Родительский компонент может использовать <template> с атрибутом slot-scope (используя <slot-example>) для получения реквизитов, переданных в слот. Любое выражение JavaScript, которое может появиться в позиции аргумента определения функции, может быть принято значением slot-scope.