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

Во Vue есть несколько способов изменить состояние родительского компонента из дочернего. Основной и рекомендуемый - эмиссия событий через $emit. Дочерний компонент генерирует событие, а родитель подписывается на него и обновляет своё состояние.

Пример:

Родительский компонент (Parent.vue):

<template>
  <div>
    <p>Счётчик: {{ count }}</p>
    <ChildComponent @increment="handleIncrement" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return { count: 0 };
  },
  methods: {
    handleIncrement(value) {
      this.count += value;
    }
  }
};
</script>

Дочерний компонент (ChildComponent.vue):

<template>
  <button @click="emitIncrement">Увеличить на 5</button>
</template>

<script>
export default {
  emits: ['increment'],
  methods: {
    emitIncrement() {
      this.$emit('increment', 5);
    }
  }
};
</script>

Альтернативные подходы:

• v-model - для двусторонней привязки данных (синтаксический сахар над :value и @input).

• Provide/Inject - для передачи функций изменения состояния через глубокую вложенность (но это менее прозрачно).

• Pinia/Vuex - для глобального состояния, когда компоненты не связаны напрямую.

Рекомендация: Используйте $emit для прямых родительско-дочерних связей - это соответствует однонаправленному потоку данных Vue и делает код предсказуемым.