Vue父组件通过refs获取子组件的实例和方法
下面的案例中,父组件引用了一个以element-ui中的NavMenu封装的子组件。<!-- 父组件 --><div><childMenu ref="childMenu"></childMenu></div><!-- 子组件 --><template><el-menu ref="elMenu"><
·
下面的案例中,父组件引用了一个以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();
更多推荐
已为社区贡献17条内容
所有评论(0)