Области слотов: передача данных родителю
slot :data='value', v-slot='{ data }' со стороны родителя, шаблон render prop
«Области слотов: передача данных родителю» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Ограничение обычных слотов
Обычные слоты позволяют родительскому компоненту передавать разметку вниз, но родительский компонент не может получить доступ к внутренним данным дочернего. Области видимости слотов решают эту проблему, позволяя дочернему компоненту передавать данные содержимому слота.
Передача данных через слот
Дочерний компонент связывает атрибуты со своим элементом <slot>; они называются свойствами слота. Эти свойства передаются всему, что отрисовывает родительский компонент.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Получение свойств слота
В родительском компоненте значение v-slot становится объектом, содержащим все свойства слота, переданные дочерним компонентом.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Деструктуризация свойств слота
Поскольку значение слота — это обычный объект, его можно деструктурировать прямо в строке, чтобы сделать код понятнее.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Сокращённая запись слота по умолчанию с областью видимости
Если используется только слот по умолчанию, можно разместить v-slot непосредственно на теге компонента вместо вложенного шаблона.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Переименование и значения по умолчанию
Деструктуризация поддерживает переименование и значения по умолчанию, как и обычный JavaScript.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Именованные слоты с областью видимости
Именованные слоты также могут иметь собственную область видимости. Объедините имя слота с деструктурированными свойствами.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Компоненты без собственной разметки
Слоты с областью видимости позволяют использовать шаблон компонента без собственной разметки: компонент обрабатывает логику и state, но не создаёт свою разметку — он только передаёт данные через слот с областью видимости и позволяет родительскому компоненту определить интерфейс.
Компонент без разметки для отслеживания мыши
Компонент отслеживает курсор и предоставляет координаты. Он отрисовывает только свой слот по умолчанию, передавая x и y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Использование компонента без разметки
Родительский компонент предоставляет всё визуальное содержимое и считывает переданные данные, полностью отделяя логику от представления.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Слоты с областью видимости и компонуемые функции
В Vue 3 компонуемые функции часто заменяют компоненты без разметки, когда нужно повторно использовать только логику. Но слоты с областью видимости по-прежнему лучше подходят, когда дочерний компонент должен управлять перебором или структурой, например списка или таблицы, а родительский настраивает каждый элемент.
Быстрая проверка
Как родительский компонент получает данные, предоставленные слотом с областью видимости?
Повторение
Вы узнали, что слоты с областью видимости позволяют дочернему компоненту передавать данные наверх, связывая props с его элементом <slot>. Родительский компонент считывает их через значение v-slot, часто используя деструктуризацию. Это позволяет создавать компоненты без разметки, отделяющие логику от представления.
Часто задаваемые вопросы
Урок «Области слотов: передача данных родителю» бесплатный?
Да — полный текст урока «Области слотов: передача данных родителю» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Области слотов: передача данных родителю»?
slot :data='value', v-slot='{ data }' со стороны родителя, шаблон render prop Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Области слотов: передача данных родителю»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Именованные слоты и слот по умолчанию
- Области слотов: передача данных родителю
- Динамические имена слотов
- Резервное содержимое слота и проверка слотов