Как передать данные или методы от дочернего компонента к родительскому во Vue?

Во Vue.js для передачи данных или вызова методов от дочернего компонента к родительскому обычно используется механизм событий.

Дочерний компонент может с помощью $emit отправить событие с нужными данными, а родительский компонент слушает это событие и реагирует на него.

Пример:

<!-- Родительский компонент -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Данные от дочернего:', payload);
    }
  }
}
</script>

<!-- Дочерний компонент -->
<template>
  <button @click="sendData">Отправить данные родителю</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Привет, родитель!' });
    }
  }
}
</script>

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