> Как изменить состояние родительского компонента из дочерних компонентов во Vue (Vue.js)

Короткий ответ

Во Vue дочерний компонент изменяет состояние родителя через emit событий. Родитель слушает событие и обновляет свои данные. Для сложных сценариев используют v-model, provide/inject или Vuex/Pinia. Прямая мутация props нарушает однонаправленный поток данных и считается антипаттерном.

Подробное объяснение

Vue реализует однонаправленный поток данных: props передаются от родителя к потомку, а изменения инициируются событиями, которые дочерний компонент эмитирует вверх. Это обеспечивает предсказуемость и упрощает отладку.

Основные механизмы:

• emit + слушатель: дочерний компонент вызывает $emit('eventName', payload), родитель обрабатывает через @eventName="handler". Самый прямой и рекомендуемый способ.
• v-model: синтаксический сахар над emit. По умолчанию использует событие update:modelValue и prop modelValue. Позволяет писать v-model:propName для множественных привязок.
• provide/inject: для глубоко вложенных компонентов, когда передача через цепочку emit становится громоздкой. Дочерний может inject'ить функцию, которая изменяет состояние родителя.
• глобальное состояние (Pinia/Vuex): когда состояние нужно множеству несвязанных компонентов. Компоненты вызывают actions/mutations напрямую.

Важно: прямое изменение props (например, props.value = newValue) вызывает предупреждение в development mode и нарушает реактивность. Vue 3 в strict mode также запрещает это.

На практике

Выбор метода зависит от архитектуры:

• Для простых форм и UI-компонентов (кнопки, инпуты) - emit.
• Для кастомных контролов (select, datepicker) - v-model с кастомным prop.
• Для shared state между далёкими компонентами - provide/inject с функциями-сеттерами.
• Для глобальных данных (авторизация, тема) - Pinia.

В Vue 3 Composition API emit получают через defineEmits или context.emit. В Options API - через this.$emit.

Пример кода

<!-- Parent.vue -->
<template>
  <Child @update-count="handleUpdateCount" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const count = ref(0)

function handleUpdateCount(newValue) {
  count.value = newValue
}
</script>

<!-- Child.vue -->
<template>
  <button @click="emit('updateCount', count + 1)">Increment</button>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['updateCount'])
const count = ref(0)
</script>

Как отвечать на собеседовании

Начни с принципа однонаправленного потока данных. Перечисли основные способы: emit, v-model, provide/inject, глобальное состояние. Для senior-позиции важно обосновать выбор: когда использовать emit, а когда - provide/inject или Pinia. Упомяни, что emit - это явный контракт, а provide/inject - неявная связь, которая усложняет рефакторинг. Добавь про реактивность: при emit родитель обновляет ref/reactive, и Vue автоматически перерисовывает дочерние компоненты.

Что проверяет интервьюер

• Понимание однонаправленного потока данных и почему это важно.
• Знание всех механизмов коммуникации между компонентами.
• Умение выбирать правильный инструмент под задачу.
• Понимание реактивности: как изменение состояния родителя триггерит обновление потомков.
• Знание Composition API и Options API в контексте emit.

Типичные ошибки

• Прямая мутация props - нарушает реактивность и контракт.
• Использование provide/inject для простых случаев, где достаточно emit - усложняет код.
• Забывают объявить emits в defineEmits (Vue 3) - теряется документация и валидация.
• Передача всего объекта состояния через props вместо отдельных значений - вызывает лишние ререндеры.
• Использование глобального стейта (Pinia) для локального состояния формы - избыточно.