Во Vue.js 2 двусторонняя привязка с родительским компонентом не работает "из коробки", но есть решение этой проблемы с использованием модификатора .sync.
Двусторонняя привязка - это механизм, позволяющий связать свойство дочернего компонента с его родительским компонентом таким образом, чтобы изменения в одном компоненте автоматически отражались в другом.
В Vue.js 2 по умолчанию отсутствует возможность двусторонней привязки напрямую, поскольку это может стать источником сложных проблем слежения за изменениями и реактивности. Однако, для решения этой задачи существует модификатор .sync.
Модификатор .sync позволяет создавать двустороннюю привязку между родительским и дочерним компонентами. Он позволяет передавать значение из родительского компонента в дочерний через пропс, а затем вносить изменения в это значение из дочернего компонента и автоматически отражать их в родительском.
Для использования модификатора .sync вам необходимо сначала создать пропс в дочернем компоненте и передать ему значение из родительского компонента. Затем, чтобы установить связь между двумя компонентами, вам нужно указать модификатор .sync в родительском компоненте, при передаче пропса в дочерний компонент.
Рассмотрим простой пример, чтобы проиллюстрировать это:
<!-- В родительском компоненте -->
<template>
<div>
<ChildComponent :value.sync="parentValue" />
<p>Родительское значение: {{ parentValue }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentValue: 'Начальное значение',
};
},
components: {
ChildComponent,
},
};
</script>
<!-- В дочернем компоненте -->
<template>
<div>
<input type="text" v-model="childValue" />
</div>
</template>
<script>
export default {
props: {
value: {
required: true,
},
},
computed: {
childValue: {
get() {
return this.value;
},
set(newValue) {
this.$emit('update:value', newValue);
},
},
},
};
</script>
В данном примере, родительский компонент имеет свойство parentValue, которое связано с дочерним компонентом через пропс value.sync. В свою очередь, дочерний компонент имеет свойство childValue, которое используется для двусторонней привязки с value. При вводе значения в поле ввода дочернего компонента, происходит изменение childValue, и через emit-событие update:value изменения передаются в родительский компонент, обновляя parentValue.
Таким образом, модификатор .sync позволяет реализовать двустороннюю привязку между родительским и дочерним компонентами во Vue.js 2.