В Vue.js 3 можно передавать данные из дочернего компонента в главный компонент через промежуточный компонент с помощью функции обратного вызова (callback). В данном случае нам потребуется использовать emit и on:
1. В дочернем компоненте создаем переменную с данными и функцию, которая будет вызываться при необходимости передачи данных:
// Дочерний компонент <template> <div> <!-- Отображение данных --> <p>{{ data }}</p> <!-- Кнопка для передачи данных --> <button @click="sendData">Отправить данные</button> </div> </template> <script> export default { data() { return { data: 'Данные из дочернего компонента', }; }, methods: { sendData() { // Вызываем функцию обратного вызова и передаем в нее данные this.$emit('dataReceived', this.data); }, }, }; </script>
2. Создаем промежуточный компонент, который будет принимать данные от дочернего компонента и передавать их в главный компонент:
// Промежуточный компонент <template> <div> <!-- Передача данных в главный компонент --> <ChildComponent @dataReceived="passData"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { passData(data) { // Вызываем функцию обратного вызова и передаем полученные данные в главный компонент this.$emit('dataPassed', data); }, }, }; </script>
3. В главном компоненте принимаем данные от промежуточного компонента:
// Главный компонент <template> <div> <!-- Отображение переданных данных --> <p>{{ receivedData }}</p> </div> </template> <script> import IntermediateComponent from './IntermediateComponent.vue'; export default { components: { IntermediateComponent, }, data() { return { receivedData: '', }; }, methods: { setData(data) { // Принимаем данные от промежуточного компонента this.receivedData = data; }, }, mounted() { // Подписываемся на событие передачи данных от промежуточного компонента this.$on('dataPassed', this.setData); }, }; </script>
Теперь данные из дочернего компонента передаются через промежуточный компонент и отображаются в главном компоненте.