Skip to main content
Практика завдань

Як ефективно передавати дані між компонентми?

Розуміння різниці між props та emit у Vue.js та як ефективно передавати дані між компонентми.

Різниця між props та emit

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

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

Як працюють props?

Props дозволяють батьківському компоненту передавати дані дочірньому. Ці дані не можуть бути змінені всередині дочірнього компонент.

Приклад використання Props:

jsx
<script setup> defineProps(['message']); </script> <template> <p>Message: {{ message }}</p> </template>

Батьківський компонент:

jsx
<template> <ChildComponent message="Hello, Vue!" /> </template>
  • message передається до ChildComponent, але всередині нього залишається незмінним.

Як працює emit?

Коли дочірньому компоненту потрібно надіслати дані батьківському, використовується emit. Це зручно, наприклад, при обробці подій кнопок або вводу.

Приклад використання emit:

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

jsx
<script setup> import { defineEmits } from 'vue'; const emit = defineEmits(['updateMessage']); </script> <template> <button @click="emit('updateMessage', 'New message')">Change message</button> </template>

Батьківський компонент:

jsx
<script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; const message = ref('Initial message'); </script> <template> <p>Message: {{ message }}</p> <ChildComponent @updateMessage="(newMsg) => message = newMsg" /> </template>
  • Тут дочірній компонент надсилає нове значення message до батьківського компонент.

v-model

Якщо потрібно синхронізувати дані між батьківським та дочірніми компонентми, використовується v-model.

Батьківський компонент:

jsx
<ChildComponent v-model="parentMessage" />

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

jsx
<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

Підсумок

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

Правильне розуміння цих механізмів робить код більш структурованим та керованим!

Зміст

Різниця між props та emitЯк працюють props?Як працює emit?v-modelКоли використовувати props, emit та v-model?Підсумок

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань
Назад
Далі