web开发Web前端之路

vue 组件传值

2019-07-16  本文已影响5人  1994陈

子传父:

子
<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
      }
   },
上一篇 下一篇

猜你喜欢

热点阅读