Sobes.tech
Middle

Wie übergibt man Daten oder Methoden von einer Kindkomponente an eine Elternkomponente in Vue?

sobes.tech KI

Antwort von AI

Во 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>

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