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
}
},