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

Question

<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 = btn

console.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>

Answer 1

不要使用箭头函数methods: {  handleBtnChange() {} }