下面的案例中,父组件引用了一个以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();

 

Logo

前往低代码交流专区

更多推荐