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

Question

[Alexey2236]

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

Comments

[Данил Бабаков]

Либо шина данных, либо $emit в 2-ух компонентах

[Alexey2236]

Данил Бабаков, вот как мне сделать emit в промежуточном компоненте

[Данил Бабаков]

Alexey2236, также как в первом. Метод обьявите, который сработет при emit'e из 3 компонента во 2.
Но кажется шина данных лучше будет.

Answer 1

[GrayHorse]

Передавай в пропс по цепочке объект-состояние с реативной переменной, либо с функцией коллбеком.

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

App.vue

<template>
  <div>App: {{numRef}}</div>
  <hr>
  <Minus :state="state"/>
</template>

<script setup>
import {ref, watchEffect} from "vue";
import Minus from "./Minus.vue";

const numRef = ref(0);
const state = {numRef};

watchEffect(() => {
  console.log(numRef.value);
});  
</script>

Minus.vue

<template>
  <div>{{state.numRef}} - <button @click="onClick">Minus</button></div>
  <Plus :state="state"/>
</template>

<script setup>
import Plus from "./Plus.vue";
const props = defineProps(["state"]);
function onClick() {
  props.state.numRef.value--;
}
</script>

Plus.vue

<template>
  <div>{{state.numRef}} - <button @click="onClick">Plus</button></div>
</template>

<script setup>
const props = defineProps(["state"]);
function onClick() {
  props.state.numRef.value++;
}
</script>

Либо объяви реактивную переменную в отдельном JS файле и импортируй ее в нужных компонентах.