el-aside里面放了一个el-menu组件点击el-menu如何在el-main中的组件显示
时间: 2023-11-22 13:07:27 浏览: 247
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
可以通过以下步骤实现:
1. 在el-menu组件中设置点击事件,通过emit方法向父组件传递点击事件的信息。
2. 在父组件中监听该事件,根据传递的信息动态修改el-main中需要显示的组件。
以下是示例代码:
```
<template>
<div>
<el-aside>
<el-menu @select="handleSelect">
<el-menu-item index="1">组件1</el-menu-item>
<el-menu-item index="2">组件2</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<component :is="currentComponent"></component>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: "component1"
};
},
methods: {
handleSelect(index) {
if (index === "1") {
this.currentComponent = "component1";
} else if (index === "2") {
this.currentComponent = "component2";
}
}
}
};
</script>
```
在上面的示例中,el-aside中放置了一个el-menu组件,每个el-menu-item对应一个组件。在el-menu中设置了select事件,当点击某个el-menu-item时,会触发该事件,并向父组件传递该项的index信息。
在父组件中监听该事件,根据传递的index信息动态修改currentComponent的值,从而动态渲染el-main中需要显示的组件。
阅读全文