Как поднять данные из дочернего компонента в главный через ещё один промежуточный компонент vue 3?

В 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>

Теперь данные из дочернего компонента передаются через промежуточный компонент и отображаются в главном компоненте.