Двустороннюю привязку данных можно легко реализовать с помощью директивы v-model. Вот шаги по реализации двусторонней привязки данных с помощью директивы v-model:
Определите свойство данных в экземпляре Vue.
<template>
<input v-model="message" type="text">
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: '' // Определить атрибут данных
};
}
};
</script>
Используйте директиву v-model в элементах формы для привязки данных.
<input v-model="message" type="text">
В этом примере v-model="message" двунаправленно привязывает значение элемента формы к свойству данных сообщения в экземпляре Vue.
Когда пользователь вводит содержимое в элемент формы, v-модель автоматически обновляет связанные данные.
Когда пользователь вводит содержимое в поле ввода, v-модель прослушивает событие ввода, получает значение, введенное пользователем, и обновляет его до атрибута данных сообщения.
Изменения данных также будут отражены на элементах формы. Если значение атрибута данных сообщения изменено в экземпляре Vue, элемент формы, привязанный к атрибуту данных, автоматически обновится для отображения нового значения.
Посредством таких шагов директива v-model реализует двустороннюю привязку между значением элемента формы и атрибутом данных в экземпляре Vue. Независимо от того, вводит ли пользователь содержимое в элемент формы или изменяет значение свойства данных в экземпляре Vue, обе стороны остаются синхронизированными.
.sync — это модификатор, предоставляемый Vue для реализации двусторонней привязки данных между родительским и дочерним компонентами. Это может упростить процесс передачи данных от родительских компонентов дочерним компонентам и получения измененных данных от дочерних компонентов.
Родительский компонент передает данные дочернему компоненту:
<template>
<child-component :value.sync="data"></child-component>
</template>
Измените данные внутри дочернего компонента и уведомите родительский компонент:
<template>
<input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
</template>
В дочернем компоненте используйте .sync
Модификатор связывает значение, переданное родительским компонентом, со свойством дочернего компонента и передает $emit
триггер метода update:
Префиксные события для обновления данных родительского компонента.
Двусторонняя привязка данных может быть достигнута между компонентами с помощью пользовательских событий. Родительский компонент передает данные дочернему компоненту через реквизиты. Когда дочерний компонент изменяет данные, он передает измененные данные родительскому компоненту через пользовательские события.
Родительский компонент передает данные дочернему компоненту:
<template>
<child-component :value="data" @input="data = $event"></child-component>
</template>
Измените данные внутри дочернего компонента и уведомите родительский компонент:
<template>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>
В дочернем компоненте передайте $emit
триггер метода input
событие и передать измененные данные родительскому компоненту.
Vuex — это официальная библиотека управления состоянием для Vue, которая предоставляет централизованное хранилище данных для управления общим состоянием. Определяя состояния и мутации в Vuex, можно добиться глобальной двусторонней привязки данных.
Определение и изменение статуса:
// существовать Vuex из state в данных определения
state: {
value: ''
},// существовать mutations 中修改данные
mutations: {
updateValue(state, newValue) {
state.value = newValue;
}
}
Использование и изменение состояния в компонентах:
<template>
<input type="text" :value="value" @input="updateValue">
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['value'])
},
methods: {
...mapMutations(['updateValue'])
}
}
</script>
Используется в компонентах mapState
Чтобы сопоставить состояние с вычисляемым свойством компонента, используйте mapMutations
Воля mutations Сопоставьте метод компонента для достижения двусторонней привязки данных к общему состоянию.