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

Слоты

  • Контент рекламного места — контент, написанный в родительском шаблоне. Этот контент будет отображаться в выделенном заполнителе дочернего шаблона.
  • Область компиляции — все в родительском шаблоне компилируется в родительской области; все в дочернем шаблоне компилируется в дочерней области.
  • Запасной контент — контент, предоставленный дочерним шаблоном. Если родительский шаблон не предоставляет явное содержимое, то все, что написано в дочернем шаблоне, будет отображаться.
  • Именованные слоты. В шаблоне клиента может быть несколько слотов. Чтобы однозначно идентифицировать их, нам нужно указать значение атрибута name.
  • Слоты с заданной областью –механизм доступа к данным в дочерней области из родительского шаблона с помощью реквизитов слота.
  • Динамические названия слотов

Понимание всех этих концепций немного сложно для новичков, если мы читаем и используем их на основе руководства или известного синтаксиса. Мы должны научиться использовать реальную проблему для решения.

💡Если вы хотите эффективно изучать JavaScript, читайте кодовую базу Vue. Если вы хотите эффективно изучить Vue, прочитайте Vuetify или аналогичную кодовую базу.

Сюжетная линия:

Предположим, нам нужно создать общий компонент с именем v-data-table. Как правило, табличный компонент должен предоставлять следующие функции.

  1. Принимать заголовки в качестве реквизита
  2. Принимать элементы (содержимое таблицы) в качестве реквизита
  3. Предоставьте правильно сформированную таблицу с необходимыми стилями в качестве лучших значений по умолчанию.
  4. Разрешить пользователям (разработчикам) настраивать определенные столбцы в соответствии со своими потребностями

Пункт № 4 «сложно» реализовать. С v-slot это будет проще простого.

В приведенной ниже таблице разработчик хочет настроить цвет текста столбца «Сообщение» в зависимости от его значения.



Компонент таблицы данных
Стандартная таблица данных по умолчанию отображает ваши данные в виде простых строк. # Пользовательский фильтр Вы можете переопределить фильтр по умолчанию…vuetifyjs.com



Строки 20–22 содержат сведения об именованном слоте, динамических названиях слотов и резервном содержимом — создайте один слот для каждого имени заголовка (столбец таблицы). Если пользователь не хочет настраивать столбец, он не предоставит слот в своем клиентском коде.

Строка 6–8 позволяет настроить один из столбцов «msg». Остальные столбцы будут отображаться на основе резервного содержимого.