我在使用antd-vue的menu的时候,采用的是单文件渲染的方式,
采用的红框中第二种组件方式,但是在使用中报错:
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>
是按需引入的menu组件么?应该用全局注册Vue.use(Menu)