Передача данных из родительского компонента в дочерний
Создадим объект 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 для передачи данных из дочернего в родительский, реализуя двустороннюю связь. Это позволяет создавать сложные и динамические интерфейсы.