antd-vue menu进行单文件渲染报错

我在使用antd-vue的menu的时候,采用的是单文件渲染的方式,
image.png
采用的红框中第二种组件方式,但是在使用中报错:

TypeError: Cannot read property 'propsData' of undefined

虽说能渲染出来,但是这看起来很恶心,导致要查问题很痛苦,请问是哪里的代码有问题导致一直出现报错?
代码如下:

submenu:

<template>
  <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
    <span slot="title">
      <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
    </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item v-if="item.children.length === 0" :key="item.key">
        <a-icon type="pie-chart" />
        <span
          @click="headTran(`${item.path}`, `${item.key}`)"
        >
          {{ item.title }}
        </span>
      </a-menu-item>
      <sub-menu v-else :key="item.key" :menu-info="item" />
    </template>
  </a-sub-menu>
</template>
<script>
import { Menu } from 'ant-design-vue'
import subMenu from '../subMenu'
export default {
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  components: {
    subMenu
  },
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    /**
     * 头部跳转路由
     * @param {String} routerValue 要跳转的路由
     * @param {String} defaultKey 当前选中的key
     */
    headTran (routerValue, defaultKey) {
      sessionStorage.setItem('sideKey', defaultKey)
      sessionStorage.setItem('headKey', '0')
      // this.log.zfr('routerValue', routerValue)
      this.$router.push(routerValue)
    },
    /**
     * 子集菜单选择
     * @param {Obeject} value
     */
    headSubTran (value) {
      this.log.zfr('value', value)
      this.headTran(value.routerValue, value.defaultKey)
    }
  }

}
</script>

父组件引用:

<a-menu
        mode="inline"
        :defaultSelectedKeys="['0']"
        :selectedKeys="[defaultSideKey]"
      >
        <template v-for="item in menuList">
          <a-menu-item
            v-if="item.children.length === 0"
            :key="item.key"
          >
            <a-icon type="pie-chart" />
            <span
              @click="headTran(`${item.path}`, `${item.key}`)"
            >
              {{ item.title }}
            </span>
          </a-menu-item>
          <subMenu1
            v-else
            :menuInfo="item"
            :key="item.key"
            @headSubTran="headSubTran"
          />
        </template>
      </a-menu>
阅读 6.5k
1 个回答

是按需引入的menu组件么?应该用全局注册Vue.use(Menu)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题