获取选定选项的值并将其传递给另一个子组件时出现的vue.js问题

<template>
  <div>
    <select v-model="selectedOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <ChildComponent :selected-option="selectedOption" @option-selected="handleOptionSelected" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    handleOptionSelected(option) {
      // 处理选项被选择的事件
      console.log('选项被选择:', option);
    }
  }
};
</script>

<template>
  <div>
    <p>选定的选项值：{{ selectedOption }}</p>
    <button @click="selectOption">选择选项</button>
  </div>
</template>

<script>
export default {
  props: ['selectedOption'],
  methods: {
    selectOption() {
      // 触发选项被选择的事件，并将选项值传递给父组件
      this.$emit('option-selected', this.selectedOption);
    }
  }
};
</script>