怕忘了，记录一下

Vue3 组件调用本身

创建temp.vue文件，调用自己
主要是 name 要设置一个唯一名称 如下的 CustumVue 然后直接调用
export default defineComponent({
name: 'CustumVue'
})
调用：
<custum-vue />

<template>
  /* 主要是 name要设置一个唯一名称 如下的 CustumVue 然后直接调用 */
  <custum-vue />
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'CustumVue'
})
</script>

Element-Plus左侧菜单自动无限分级

首先菜单的格式如下：可能会从后端获取（如果不是已经处理好的结构需要递归处理一下，递归方法网上很，这里就不码了。）

[
  {
    id: 1,
    path: '/Home',
    name: 'Home',
    component: () => import('xxxxxx'),
    meta: {
      title: '首页',
      icon: 'Plus'
    },
    children: [
      {
        id: 10,
        path: '/aaa',
        name: 'aaaa',
        component: () => import('xxxxxx'),
        meta: {
          title: 'aaaa',
          icon: 'Plus'
        },
        children: [
          ......
        ]
      }
      ......
    ]
  }
  ......
]

创建sider.vue文件 (<c-menus />组件是关键)

// sider.vue
<template>
  <el-scrollbar height="100%">
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
    >
      <c-menus v-for="i in menus" :key="i.name" :menus="i" />
    </el-menu>
  </el-scrollbar>
</template>
<script>
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import CMenus from './menus.vue'

export default defineComponent({
  name: 'LayoutMenu',
  components: { CMenus },
  props: {
    isCollapse: { type: Boolean, default: false }
  },
  setup () {
    const store = useStore()
    const menus = store.getters.menus
    return {
      menus
    }
  }
})
</script>

创建c-menus.vue文件 (这里的 <i>标签是因为我用的iconfont图标)

<template>
  <el-sub-menu v-if="menus.children.length" :index="menus.name">
    <template #title>
      <i :class="'nxb ' + menus.icon" />
      <span style="margin-left: 10px;">{{ menus.title }}</span>
    </template>
    <label v-if="menus.children.length >= 1">
      /* 递归调用自己 */
      <layout-menus v-for="i in menus.children" :key="i.id" :menus="i" />
    </label>
  </el-sub-menu>
  <el-menu-item v-else :index="menus.name" @click="clickMenu(menus)">
    <i :class="'nxb ' + menus.icon" style="margin-right: 10px;" />
    <template #title>{{ menus.title }}</template>
  </el-menu-item>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'LayoutMenus',
  props: {
    menus: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  setup () {
    const router = useRouter()
    const clickMenu = (menu) => {
      router.push({
        path: menu.path,
        name: menu.name
      })
    }
    return { clickMenu }
  }
})
</script>
<style scoped>
</style>

就这样就可以实现自动无限分级了~