Директива v-slot Vue3

Vue3 内置指令Встроенные директивы Vue3

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

Базовое описание

v-slotДиректива используется для предоставления содержимого слотам или получения пропсов, переданных слотами. Это основной способ реализации распределения содержимого компонентов во Vue.

  • Сокращение: #
  • Ожидаемый типВыражение JavaScript (необязательно, требуется только при получении пропсов)
  • ФункцияОбозначает именованные слоты или слоты с ограниченной областью видимости.

Базовое использование

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

Пример

<template>
  <base-layout>
    <template v-slot:header>
      <h1>Заголовок страницы</h1>
    </template>
    <template v-slot:default>
      <p>Область основного содержимого</p>
    </template>
    <template v-slot:footer>
      <p>Информация в нижнем колонтитуле</p>
    </template>
  </base-layout>
</template>

2. Сокращённая форма

Пример

<!-- Эквивалентно -->
<template v-slot:header>Заголовок</template>
<template #header>Заголовок</template>

3. Слоты с ограниченной областью видимости

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

Пример

<!-- Родительский компонент -->
<template>
  <current-user v-slot="slotProps">
    <p>Имя пользователя: {{ slotProps.user.name }}</p>
  </current-user>
</template>

<script>
export default {
  components: { CurrentUser }
}
</script>

<!-- Дочерний компонент CurrentUser.vue -->
<template>
  <slot :user="currentUser"></slot>
</template>

<script>
export default {
  data() {
    return {
currentUser: { name: 'Zhang San' }
    }
  }
}
</script>

Vue3 内置指令Встроенные директивы Vue3

Другие расширения