Связывание данных

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

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

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

<current-user>
  {{ user.firstName }}
</current-user>

Однако это не сработает, потому что только компонент <current-user> имеет доступ к user, а новое содержимое слота отрисовывается в родительском.

Чтобы сделать user доступным для содержимого слота в родительском компоненте, необходимо добавить привязку user в качестве атрибута на элементе <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>

В этом примере мы выбрали имя объекта slotProps, содержащего все входные параметры слота, но можно использовать любое другое, которое нравится.