4 способа реализации двусторонней привязки данных в Vue
4 способа реализации двусторонней привязки данных в Vue
1. Используйте директиву v-model для реализации двусторонней привязки данных.

Двустороннюю привязку данных можно легко реализовать с помощью директивы v-model. Вот шаги по реализации двусторонней привязки данных с помощью директивы v-model:

Определите свойство данных в экземпляре Vue.

Язык кода:javascript
копировать
<template>
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '' // Определить атрибут данных
    };
  }
};
</script>

Используйте директиву v-model в элементах формы для привязки данных.

Язык кода:javascript
копировать
<input v-model="message" type="text">

В этом примере v-model="message" двунаправленно привязывает значение элемента формы к свойству данных сообщения в экземпляре Vue.

Когда пользователь вводит содержимое в элемент формы, v-модель автоматически обновляет связанные данные.

Когда пользователь вводит содержимое в поле ввода, v-модель прослушивает событие ввода, получает значение, введенное пользователем, и обновляет его до атрибута данных сообщения.

Изменения данных также будут отражены на элементах формы. Если значение атрибута данных сообщения изменено в экземпляре Vue, элемент формы, привязанный к атрибуту данных, автоматически обновится для отображения нового значения.

Посредством таких шагов директива v-model реализует двустороннюю привязку между значением элемента формы и атрибутом данных в экземпляре Vue. Независимо от того, вводит ли пользователь содержимое в элемент формы или изменяет значение свойства данных в экземпляре Vue, обе стороны остаются синхронизированными.

Второе: используйте модификатор .sync:

.sync — это модификатор, предоставляемый Vue для реализации двусторонней привязки данных между родительским и дочерним компонентами. Это может упростить процесс передачи данных от родительских компонентов дочерним компонентам и получения измененных данных от дочерних компонентов.

Родительский компонент передает данные дочернему компоненту:

Язык кода:javascript
копировать
<template>
  <child-component :value.sync="data"></child-component>
</template>

Измените данные внутри дочернего компонента и уведомите родительский компонент:

Язык кода:javascript
копировать
<template>
  <input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
</template>

В дочернем компоненте используйте .sync Модификатор связывает значение, переданное родительским компонентом, со свойством дочернего компонента и передает $emit триггер метода update: Префиксные события для обновления данных родительского компонента.

Третье: используйте пользовательские события

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

Родительский компонент передает данные дочернему компоненту:

Язык кода:javascript
копировать
<template>
  <child-component :value="data" @input="data = $event"></child-component>
</template>

Измените данные внутри дочернего компонента и уведомите родительский компонент:

Язык кода:javascript
копировать
<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>

В дочернем компоненте передайте $emit триггер метода input событие и передать измененные данные родительскому компоненту.

Четвертое: используйте глобальное управление состоянием (например, Vuex).

Vuex — это официальная библиотека управления состоянием для Vue, которая предоставляет централизованное хранилище данных для управления общим состоянием. Определяя состояния и мутации в Vuex, можно добиться глобальной двусторонней привязки данных.

Определение и изменение статуса:

Язык кода:javascript
копировать
// существовать Vuex из state в данных определения
state: {
  value: ''
},// существовать mutations 中修改данные
mutations: {
  updateValue(state, newValue) {
    state.value = newValue;
  }
}

Использование и изменение состояния в компонентах:

Язык кода:javascript
копировать
<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 Сопоставьте метод компонента для достижения двусторонней привязки данных к общему состоянию.

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose