Деструктурирование входных параметров слота

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

function (slotProps) {
  // ... содержимое слота ...
}

Это значит, что значение v-slot может принимать любое допустимое выражение JavaScript, которое может появиться в позиции аргумента определения функции. Поэтому в поддерживаемых окружениях (однофайловых компонентах или современных браузерах), можно также использовать деструктурирование ES2015 чтобы извлекать определённые входные параметры слотов, например вот так:

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

Такой подход сделает шаблон намного чище, особенно когда слот предоставляет множество входных параметров. Это также открывает другие возможности, такие как переименование входных параметров, например user в person:

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

Можно даже определять значения по умолчанию, которые будут использоваться в случае, если входной параметр слота не определён:

<current-user v-slot="{ user = { firstName: 'Гость' } }">
  {{ user.firstName }}
</current-user>