根据子组件菜单选项更改父组件中显示的json内容

<template>
  <div>
    <child-component @menuChange="handleMenuChange"></child-component>
    <display-component :data="jsonData"></display-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
    DisplayComponent
  },
  data() {
    return {
      jsonData: {}
    }
  },
  methods: {
    handleMenuChange(selectedOption) {
      // 根据选项的值修改jsonData的内容
      if (selectedOption === 'option1') {
        this.jsonData = { name: 'Option 1', value: 1 }
      } else if (selectedOption === 'option2') {
        this.jsonData = { name: 'Option 2', value: 2 }
      } else if (selectedOption === 'option3') {
        this.jsonData = { name: 'Option 3', value: 3 }
      }
    }
  }
}
</script>

<template>
  <div>
    <select @change="handleMenuChange">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
</template>

<script>
export default {
  methods: {
    handleMenuChange(event) {
      const selectedOption = event.target.value
      this.$emit('menuChange', selectedOption)
    }
  }
}
</script>

<template>
  <div>
    <p>Name: {{ data.name }}</p>
    <p>Value: {{ data.value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>