为了账号安全,请及时绑定邮箱和手机立即绑定

为什么父子组件传值dom没有跟着改变,这个组件是home-aside,是不是我写法错了

为什么父子组件传值dom没有跟着改变,这个组件是home-aside,是不是我写法错了

江城fen 2018-09-28 22:43:13
<template><div class="main"><el-container><el-header><home-header @btnChange="handleBtnChange"></home-header></el-header><el-container><home-aside :isCollapse="isCollapse"></home-aside><el-main><home-main></home-main></el-main></el-container></el-container></div></template><script>import HomeHeader from './commponents/Header'import HomeAside from './commponents/HomeAside'import HomeMain from './commponents/Main'export default {name: 'Home',components: {HomeHeader,HomeAside,HomeMain},data: function () {return {visible: false,isCollapse: true}},methods: {handleBtnChange: (btn) => {this.isCollapse = btnconsole.log(this.isCollapse)}}}</script><style lang="scss" scoped>@import "~styles/index.scss"; //引入全局样式.el-header, .el-footer {background-color: #ffffff;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #ffffff;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}</style><template><div><el-menu       default-active="2"       class="el-menu-vertical-demo"       @open="handleOpen"       @close="handleClose"       :collapse = "isCollapse"       ><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item></el-menu></div></template><script>export default {props: {isCollapse: Boolean},name: 'HomeAside',methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)}}}</script><style lang="scss" scoped>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}</style>
查看完整描述

1 回答

已采纳
?
聪明的汤姆

TA贡献112条经验 获得超33个赞

不要使用箭头函数

methods: {
 handleBtnChange() {}
}


查看完整回答
反对 回复 2018-09-30
  • 1 回答
  • 0 关注
  • 1726 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信