一个vue3前端页面 分两个子件区域 左边区域为固定菜单栏 每个菜单选项绑定一个点击事件 点击通过绑定的方法给父组件传值 父组件监听他 只要他变化 就获取得到的值 并决定右侧的子组件显示不同子组件

在 Vue 3 中，如果你想要构建这样一个页面结构，你可以采用组件化的开发模式。首先，创建一个包含两个子组件的父组件（例如`App.vue`），左侧是一个固定的`MenuBar`组件，每个菜单项作为`MenuItem`的实例；右侧根据父组件接收到的值动态渲染不同的子组件。

1. **左侧 MenuBar 组件**:

<template>
  <div class="left-menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <button @click="parentClick(item.value)"> {{ item.text }} </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MenuBar',
  props: {
    menuItems: { type: Array, required: true }
  },
  methods: {
    parentClick(value) {
      this.$emit('menu-item-click', value);
    }
  }
};
</script>

在这个组件里，`menuItems`是父组件传递过来的数据，当点击按钮时会触发`parentClick`方法并发送自定义事件`menu-item-click`。

2. **父组件 App.vue**

<template>
  <div id="app">
    <MenuBar :menuItems="menuOptions" />
    <router-view :displayComponent="selectedComponent"></router-view>
  </div>
</template>

<script>
import MenuBar from './components/MenuBar.vue';
import ChildComponentA from './components/ChildComponentA.vue';
import ChildComponentB from './components/ChildComponentB.vue';

export default {
  name: 'App',
  components: {
    MenuBar,
    ChildComponentA,
    ChildComponentB
  },
  data() {
    return {
      selectedComponent: '', // 初始默认值
      menuOptions: ... // 定义你的菜单数据数组
    };
  },
  computed: {
    displayComponent() {
      switch (this.selectedComponent) {
        case 'componentA':
          return ChildComponentA;
        case 'componentB':
          return ChildComponentB;
        // 添加其他情况...
        default:
          return null; // 或者返回默认的无组件
      }
    }
  },
  methods: {
    handleMenuItemClick(value) {
      this.selectedComponent = value;
    }
  },
  watch: {
    selectedComponent(newVal) {
      this.$router.push({ name: newVal });
    }
  }
};
</script>

在父组件中，监听`menu-item-click`事件，并根据接收到的值更新`selectedComponent`，然后用它来决定渲染哪个子组件。