\n\n\n\n\n\n\n\n```\n\nАльтернатива без сахара — явные props + emits (односторонний поток вниз, события вверх). `v-model` не нарушает one-way data flow: под капотом всё равно prop + emit.\n\nВо Vue 3.4+ есть упрощения вокруг `defineModel()`, которые уменьшают boilerplate child-компонента — можно упомянуть как современный синтаксис. Но классический ответ с `modelValue` + `update:modelValue` всё ещё эталон для собеседований и понимания механизма."}}}

Как реализовать двустороннее связывание во Vue?

Vue · junior · сложность 2

Войти, чтобы отмечать

Фокус

Двустороннее связывание синхронизирует значение между состоянием и элементом формы (или дочерним компонентом). Во Vue для этого используют v-model.

На нативном input это сахар над :value + @input (с нюансами для checkbox/radio/select). На компоненте в Vue 3 по умолчанию: prop modelValue + событие update:modelValue. Можно иметь несколько моделей: v-model:title, v-model:content.

<!-- Parent -->
<script setup>
import { ref } from 'vue'
import PriceInput from './PriceInput.vue'
const price = ref(0)
const title = ref('')
</script>

<template>
  <input v-model.trim="title" />
  <PriceInput v-model="price" />
</template>

<!-- PriceInput.vue -->
<script setup>
defineProps({ modelValue: Number })
const emit = defineEmits(['update:modelValue'])
</script>

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

Альтернатива без сахара — явные props + emits (односторонний поток вниз, события вверх). v-model не нарушает one-way data flow: под капотом всё равно prop + emit.

Во Vue 3.4+ есть упрощения вокруг defineModel(), которые уменьшают boilerplate child-компонента — можно упомянуть как современный синтаксис. Но классический ответ с modelValue + update:modelValue всё ещё эталон для собеседований и понимания механизма.

Загрузка…