Vue.js: Передача данных между компонентами

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

Создадим объект delta с переменной message:

const delta = {
  message: 'Пробный текст'
};

В родительском компоненте (например, example.vue) будем использовать этот текст. Выведем message в дочернем компоненте (child.vue) с помощью свойств (props).

В родительском компоненте:

<child-component msg=" {{ delta.message }} "></child-component>

В дочернем компоненте (child.vue), для получения данных, определим props:

props: ['msg']

Используем msg в шаблоне дочернего компонента:

<p>{{ msg }}</p>

Пробный текст будет выведен в родительском и дочернем компонентах. Можно передавать несколько атрибутов, перечисляя их через запятую в props:

props: ['msg', 'msd']

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

Добавим в дочерний компонент текстовое поле:

<input type="text" v-model="msg"></input>

При изменении текста, обновим переменную message в родительском компоненте. Создадим метод в дочернем компоненте:

methods: {
  changeMsg(event) {
    this.$emit('change-msg', event.target.value);
  }
}

Метод использует $emit для отправки события change-msg с новым значением. В родительском компоненте:

<child-component @change-msg="updateMessage" :msg="delta.message"></child-component>

@change-msg слушает событие, updateMessage — метод в родительском компоненте:

methods: {
  updateMessage(newMessage) {
    this.delta.message = newMessage;
  }
}

Изменения в дочернем компоненте будут отражаться в родительском.

Рассмотрены способы передачи данных между компонентами Vue.js: свойства (props) для передачи данных из родительского в дочерний и $emit для передачи данных из дочернего в родительский, реализуя двустороннюю связь. Это позволяет создавать сложные и динамические интерфейсы.

Что будем искать? Например,программа