Как эффективно передавать данные между компонентами?

Разбираем разницу между props и emit в Vue.js и как эффективно передавать данные между компонентами.

Разница между props и emit

В Vue.js props и emit играют ключевые роли в передаче данных между компонентами, но выполняют противоположные задачи:

• props позволяют передавать данные от родителя к дочернему компоненту.
• emit используется для передачи данных от дочернего компонента к родительскому через события.

Как работают props?

Props позволяют родительскому компоненту передавать данные дочернему. Эти данные нельзя изменять внутри дочернего компонента.

Пример использования props:

<script setup>
defineProps(['message']);
</script>

<template>
  <p>Сообщение: {{ message }}</p>
</template>

Родительский компонент:

<template>
  <ChildComponent message="Привет, Vue!" />
</template>

• message передается в ChildComponent, но внутри него оно остается неизменяемым.

Как работает emit?

Когда дочерний компонент должен отправить данные родителю, используется emit. Это удобно, например, при обработке событий кнопок или ввода.

Пример использования emit:

Дочерний компонент:

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateMessage']);
</script>

<template>
  <button @click="emit('updateMessage', 'Новое сообщение')">Изменить сообщение</button>
</template>

Родительский компонент:

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

const message = ref('Начальное сообщение');
</script>

<template>
  <p>Сообщение: {{ message }}</p>
  <ChildComponent @updateMessage="(newMsg) => message = newMsg" />
</template>

• Здесь дочерний компонент отправляет новое значение message в родительский компонент.

v-model

Если требуется синхронизировать данные между родительским и дочерним компонентами, используется v-model.

Родительский компонент:

<ChildComponent v-model="parentMessage" />

Дочерний компонент:

<script setup>
defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />
</template>

• Теперь parentMessage будет обновляться при изменении значения в ChildComponent.

Когда использовать props, emit и v-model?

Итог

• props используются для передачи данных вниз по иерархии компонентов.
• emit позволяет дочерним компонентам отправлять данные родителям.
• v-model удобен для двустороннего связывания данных.

Правильное понимание этих механизмов делает код более структурированным и управляемым!