В Vue.js 3 чтобы передать выбранный option в родительский компонент с помощью <code>emit</code> необходимо использовать директиву <code>v-model</code> и обработчик события <code>input</code>.
Вот пример, как это можно сделать:
1. Сначала в дочернем компоненте создаем опцию внутри <code>select</code> с использованием директивы <code>v-for</code> для отображения списка опций:
<template>
<select v-model="selectedOption" @input="emitSelectedOption">
<option v-for="option in options" :value="option.value" :key="option.id">{{ option.label }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedOption: null,
options: [
{ id: 1, value: 'option1', label: 'Option 1' },
{ id: 2, value: 'option2', label: 'Option 2' },
{ id: 3, value: 'option3', label: 'Option 3' }
]
}
},
methods: {
emitSelectedOption() {
this.$emit('selected-option', this.selectedOption);
}
}
}
</script>
В этом примере мы создаем массив опций в компоненте с помощью <code>data</code> и выводим их с использованием директивы <code>v-for</code>. При выборе какого-либо из вариантов мы сохраняем выбранное значение во внутренней переменной <code>selectedOption</code> и вызываем метод <code>emitSelectedOption</code> при событии <code>input</code>, который передает выбранную опцию в родительский компонент с помощью <code>$emit</code> и пользовательского события <code>selected-option</code>.
2. В родительском компоненте, который использует дочерний компонент, мы можем прослушивать событие <code>selected-option</code> и обрабатывать переданные данные:
<template>
<div>
<p>Выбранная опция: {{ selectedOption }}</p>
<child-component @selected-option="handleSelectedOption"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
selectedOption: null
}
},
methods: {
handleSelectedOption(option) {
this.selectedOption = option;
}
}
}
</script>
В этом примере мы включаем дочерний компонент с помощью тега <code>child-component</code> и с помощью события <code>selected-option</code> прослушиваем выбранную опцию, которую передает дочерний компонент. Затем мы обрабатываем выбранную опцию в методе <code>handleSelectedOption</code> и сохраняем в переменную <code>selectedOption</code>, которую затем можно использовать для отображения выбранного значения в родительском компоненте.
Таким образом, выбранный option будет передан в родительский компонент с помощью <code>$emit</code> и пользовательского события, что позволяет родительскому компоненту обрабатывать переданные данные.