Вопрос с собеседования · Frontend

Как компоненты Vue обмениваются данными — props, emits, слоты?

JuniorАрхитектура фронтенда
Ещё спрашивают так:
  • Как передать данные от дочернего компонента родителю во Vue?
Коротко

Данные идут сверху вниз через props (defineProps), ребёнок их не меняет. Наверх ребёнок сообщает событиями (defineEmits, emit('select', id)), родитель слушает @select. v-model на компоненте — сахар для пропа modelValue и события update:modelValue. Слоты передают разметку внутрь компонента (модальное окно, карточка с произвольным содержимым). Для данных глубоко по дереву — provide/inject, для общего состояния — Pinia.

  • Изменение пропа в ребёнке — предупреждение и источник ошибок
  • Именованные слоты: шапка, тело, подвал
  • Это та же однонаправленная модель, что в React

Подробно

<!-- родитель -->
<ItemList :items="items" @select="open" />
<!-- ItemList -->
<script setup>
const props = defineProps({ items: Array })
const emit = defineEmits(['select'])
</script>

Что хотят услышать

  • props вниз, события вверх.
  • v-model на компоненте.
  • Слоты, provide/inject, Pinia.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Ребёнок напрямую изменяет props, чтобы передать данные наверх родителю
  • ✗Слоты передают данные от ребёнка к родителю, а emit — разметку вниз
  • ✗Во Vue нельзя передать разметку внутрь компонента, только строки в props
  • ✓Props — вниз, emit — вверх, слоты — разметку внутрь; общее — Pinia

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования