Как передать данные в Vue 3 из Parent в Child?

Question

[alekseiami]

Проект на Vue 3 имеет следующую структуру:

o Parent.vue
|
+----o Child01.vue
|    |
|    +----o Сhild0101.vue
|    |
|    +----o Child0102.vue
|
+----o Child02.vue

В Child0102.vue есть <input>.
В Child02.vue есть <span>.
У меня уже получилось передать содержимое <input> в Parent.vue.
Вопрос. Как мне передать это же содержимое в <span>, который в Child02.vue?
Вернее, даже не передать, а передавать. Изменилось содержимое инпута — изменилось содержимое спана. А при первичной загрузке проекта спан пусть будет пустым.

Comments

[Константин Б.]

Это же основы Vue в целом. Стоило открыть документацию и почитать перед тем как что-то делать. Props, Emits или Vuex

[Антон Антон]

Константин Б., vuex не надо, если не планируется копаться в легаси. если только начинаешь, лучше pinia

[Константин Б.]

Антон Антон, под Vuex я имел ввиду какой-то store. А что это будет уже выбор автора

Answer 1

[alekseiami]

Спасибо всем за ответы и комментарии!
Каюсь, нечётко сформулировал вопрос.
На самом деле, вопрос заключался в следующем: как заставить дочерний компонент реагировать на изменения родительского компонента?
Оказалось, что для этого нужно использовать watch.
В результате получилось вот что:

Родительский компонент:

<script setup>
    import inputContainer from './components/inputContainer.vue'
    import outputContainer from './components/outputContainer.vue'
</script>

<template>
    <inputContainer @dataFromInput="newDataFromInput" />
    <p />
    <outputContainer :getFromOutput="inputData" />
</template>

<script>
    export default {
        data() {
            return {
                inputData: ''
            };
        },
        methods: {
            newDataFromInput: function(event) {
                console.log('INPUT SAYS: ' + event);
                this.inputData = event;
            }
        }
    }
</script>

Дочерний компонент-источник:

<template>
    <select id="input-container-select" @change="onChange">
        <option>Ум</option>
        <option>Честь</option>
        <option>Совесть</option>
    </select>
</template>

<script>
    export default {
        emits: ['dataFromInput'],
        methods: {
            onChange: function(event) {
                let nowSelected = event.target.value;
                console.log(nowSelected);
                this.$emit('dataFromInput', nowSelected);
            }
        }
    }
</script>

Дочерний компонент-приёмник:

<template>
    <span>А выбрано вот что: <span id="output-span" />.</span>
</template>

<script>
    export default {
        props: {
            getFromOutput: {
                type: String
            }
        },
        watch: {
            getFromOutput: function(newVal, oldVal) {
                console.log(oldVal, newVal);
                let outputSpan = document.getElementById('output-span');
                outputSpan.innerHTML = newVal;
            }
        }
    }
</script>

Comments

[Злой минон]

А если id элемента поменяется или нужно генерировать много таких spanов с разным id?
Почему бы не добраться в документации до Composition API с Inject/Provide и удивиться насколько меньше придется писать, по сравнению с тем что написали вы...

Answer 2

[Антон Антон]

Вопрос не совсем понятен.

Для передачи значений из родителя к детям существует механизм props, для передачи в обратную сторону - механизм emit. При этом есть сахар в виде v-model, который является сочетанием того и другого.
https://vuejs.org/guide/components/v-model.html

Глобально можно еще сделать shared state composable, или стор типа pinia, но в данном конкретном случае это может быть избыточно
https://vuejs.org/guide/scaling-up/state-managemen...
https://pinia.vuejs.org/