В Vue.js, чтобы передать данные из дочернего компонента в родительский, используется механизм "emit" (излучение) событий.
Передача данных от дочернего компонента к родительскому компоненту осуществляется с помощью настройки пользовательского события в дочернем компоненте и его обработки в родительском компоненте.
В дочернем компоненте необходимо сначала создать пользовательское событие, используя директиву emits (в версии Vue.js 3) или опцию emits (в версии Vue.js 2). Например:
// Версия Vue.js 3
<template>
<button @click="sendData">Отправить данные</button>
</template>
<script>
export default {
emits: ['sendData'],
methods: {
sendData() {
this.$emit('sendData', 'Hello, родитель!');
}
}
}
</script>
// Версия Vue.js 2
<template>
<button @click="sendData">Отправить данные</button>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('sendData', 'Hello, родитель!');
}
}
}
</script>
В этом примере мы создаем пользовательское событие sendData и вызываем его с передачей значения Hello, родитель!.
Затем в родительском компоненте, где содержится дочерний компонент, мы можем прослушивать это событие и выполнить необходимые действия при его возникновении. Для этого используется глобальный компонент v-on или сокращенный синтаксис @:
<template>
<div>
<child-component @sendData="receiveData"></child-component>
<p>Полученные данные: {{ receivedData }}</p>
</div>
</template>
<script>
export default {
data() {
return {
receivedData: ''
}
},
methods: {
receiveData(data) {
this.receivedData = data;
}
}
}
</script>
В этом примере мы прослушиваем событие sendData от дочернего компонента child-component и вызываем метод receiveData, который обновляет значение переменной receivedData в родительском компоненте.
Таким образом, данные из дочернего элемента успешно передаются в родительский элемент с использованием механизма "emit" событий в Vue.js.