ant-design of vue中menu组件渲染报错

can't read property isRootMenu of undefined

单文件递归菜单官网介绍

使用单文件方式递归生成菜单。
Before v2.0, 因组件内部会动态更改a-sub-menu的属性，如果拆分成单文件，无法将属性挂载到a-sub-menu上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。

才知道什么叫函数式组件Vue.js介绍……

demo：

1. 父组件:

<template>
  <a-menu  :default-selected-keys="['1']"  :default-open-keys="['2']"  mode="inline"  theme="dark"  style="width:250px;" >
    <template v-for="item in list">
        
      <a-menu-item v-if="!item.children" :key="item.key">
        <a-icon type="pie-chart" />
        <span>{
    { item.title }}span>
      a-menu-item>
      
      <sub-menu v-else :key="item.key" :menu-info="item" />
    template>
  a-menu>
template>
<script>
// 引入组件
import SubMenu from '@/views/components/SubMenu'
export default {
       
  components: {
       SubMenu},
  data() {
       
    return {
       
      list: [
        {
       
          key: "1",
          title: "Option 1",
        },
        {
       
          key: "2",
          title: "Navigation 2",
          children: [
            {
       
              key: "2.1",
              title: "Navigation 3",
              children: [{
        key: "2.1.1", title: "Option 2.1.1" }],
            },
          ],
        },
      ],
    };
  },
};
script>

2. 子组件sub-menu。原来报错的……代码

<template>
  <a-sub-menu :key="menuInfo.key">
    <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" :key="item.key">
        <a-icon type="pie-chart" />
        <span>{
    { item.title }}span>
      a-menu-item>
         
      <sub-menu v-else :key="item.key" :menu-info="item" />
    template>
  a-sub-menu>
template>
<script>
export default {
       
  props: ["menuInfo"],
};
script>

这样写只能渲染根节点数据了

3. 子组件使用函数式组件，解决了终于

   • 模板声明为函数式组件functional就可以了。
   • 把原先子组件接收的值menuInfo前添加props。

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

好了……