Vue父组件通过refs获取子组件的实例和方法

下面的案例中，父组件引用了一个以element-ui中的NavMenu封装的子组件。

<!-- 父组件 -->
<div>
    <childMenu ref="childMenu"></childMenu>
</div>

<!-- 子组件 -->
<template>
    <el-menu ref="elMenu">
        <el-submenu ref="subMenu">
            ...
        </el-submenu>
    </el-menu>
</template>

需求是，在父组件中主动调用子组件el-menu的close()方法。然而在父组件中通过以下方式却拿不到el-menu的实例

//拿不到el-menu的实例
const elMenu = this.$refs['elMenu'];
console.log(elMenu);    // undefined

用以下方式可以拿到子组件实例，并可以调用实例的方法

const childMenu = this.$refs['childMenu'][0];
const childRefObj = childMenu.$refs;
console.log(childRefObj );    // {elMenu: VueComponent, subMenu: VueComponent}
childRefObj['elMenu'].close();