ant 菜单组件 使用时报错：Cannot read prope

我们在使用 ant design of vue插件中的菜单时，使用组件会报错。原因是ant 推荐使用函数组件，如果，使用传统的组件，就会报错。

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

1、父组件代码

<a-menu
     :default-selected-keys="['first']"
     :default-open-keys="['first']"
      mode="inline"
      theme="light"
      style="height: calc(100vh - 96px)"
      :inline-collapsed="collapsed"
 >
          <a-menu-item key="first">
                <router-link to="/">
                        <a-icon type="home" />
                        <span>首页</span>
                    </router-link>
          </a-menu-item>
                
          <template v-for="(item, index) in data">
                  <a-menu-item :key="index" v-if="!item.children">
                        <router-link :to="item.path">
                            <a-icon :type="item.icon" />
                            <span>{{item.name}}</span>
                        </router-link>
                   </a-menu-item>
                   
                   <sub-menu v-else :key="index" :data="item" :index="index"/>
                    
         </template>
</a-menu>

2、函数组件代码

<template functional>
    <a-sub-menu :key="props.index">
        <span slot="title">
            <a-icon :type="props.data.icon" />
            <span>{{props.data.name}}</span>
        </span>
        <template v-for="(item, index) in props.data.children">
            <a-menu-item :key="props.index + '-' + index" v-if="!item.children">
                <router-link :to="item.path">
                    <a-icon :type="item.icon" />
                    <span>{{item.name}}</span>
                </router-link>
            </a-menu-item>
            <!-- 循环函数组件 -->
            <sub-menu v-else :key="props.index + '-' + index" :data="item" :index="props.index + '-' + index"/>
        </template>
    </a-sub-menu>
</template>

说明：key的值是菜单选中时，所需要识别的唯一标识，所以，不能够重复