子传父:
子
- <el-menu-item index="1" @click='asideOnOff()'><i class='el-icon-caret-left'></i></el-menu-item>
- data(){
- return{
- isCollapse: true
- }
- },
- methods:{
- asideOnOff(){
- this.isCollapse= !this.isCollapse
- this.$emit('asideOnOff',this.isCollapse)
- }
- }
父:
- <el-header><HeaderPart @asideOnOff="asideOnOff"/></el-header>
- methods:{
- asideOnOff(data){
- console.log(data)
- }
- }
父传子:
父:
- <el-aside width="200px"><AsidePart :isCollapse='isCollapse'/></el-aside>
- methods:{
- asideOnOff(data){
- this.isCollapse=data
- }
- }
子:
- <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isShow">
- props:{
- isCollapse:{
- type:Boolean
- }
- },
- watch:{ //watch 监听数据发生变化更新当前组件状态
- isCollapse(val){
- this.isShow=this.$props.isCollapse
- }
- },
来源: http://www.jianshu.com/p/305497b9d09a