Спасибо всем за ответы и комментарии!
Каюсь, нечётко сформулировал вопрос.
На самом деле, вопрос заключался в следующем: как заставить дочерний компонент реагировать на изменения родительского компонента?
Оказалось, что для этого нужно использовать 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>
