menu.vue - 父组件：

<template>
    <div class="menu">
      <el-menu  :default-active="activeIndex"  class="el-menu-demo" background-color="#0f2c70"
      text-color="#fff" active-text-color="#ffd04b" mode="horizontal"  @select="handleSelect">
      <sub-menu v-for="(item,index) in menuList" :key="item.id" :menuItem="item"></sub-menu>
      </el-menu>
    </div>
</template>
<script>
import subMenu from './ElMenu.vue'
export default {
  components:{
    subMenu
  },
  data() {
    return {
      activeIndex: "1",
      menuList: []
            }
          ]
        }
      ]
    };
  },
};
</script>

ElMenu.vue - 子组件：

<template>
    <el-submenu :index="menuItem.id" v-if="menuItem.children && menuItem.children.length > 0" :popper-append-to-body="false">
        <template #title>{{menuItem.name}}</template>
        <sub-menu v-for="(it,index) in menuItem.children" :key="it.id" :menuItem="it"></sub-menu>
    </el-submenu>
    <el-menu-item :index="menuItem.id" v-else @click="routerTo(menuItem)">{{menuItem.name}}</el-menu-item>
</template>
<script>
import subMenu from '@/components/ElMenu.vue'
export default {
  name: "sub-menu",
  components:{
      subMenu
  },
  data() {
    return {};
  },
  props:{
      menuItem:''
  },
  methods:{
    routerTo(menuItem){
        this.$router.push({path:menuItem.url})
    }
  },
  created(){
    //   console.log(this.menuItem)
  }
};
</script>
<style lang="less">
</style>