1. The child component has a "@ click=" collapseStatus click event, and then the "v left230" binding class=" {"left230": changeleft," left64":! changeleft} "in the parent component changes the width with the click event,
but the click does not respond. The width has always been the default left230 width
I don"t know why
2. The code is as follows:
subcomponents
<div class="iscollapse fl" @click="collapseStatus">
<i class="iconfont magicship-daohanglanmoshi02"></i>
</div>
<script>
//import Bus from "Bus.js";
export default {
name: "Topnav",
data () {
return {
changewidth: true,
}
},
methods: {
collapseStatus: function () {//
this.$bus.$emit("collapseBtnClick" );
this.$emit("ShowChild",this.changeleft);
this.changewidth = !this.changewidth;
},
},
}
</script>parent component
<template>
<el-container>
<el-aside width="auto"><Leftnav></Leftnav></el-aside>
<el-container>
<el-header height="50px"><Topnav></Topnav></el-header>
<el-main v-bind:class="{ "left230" : changeleft, "left64": !changeleft}"
v-on:ShowChild="ShowChild"
>Main</el-main>
</el-container>
</el-container>
</template>
<script>
import Topnav from "../components/Topnav.vue"
import Leftnav from "../components/Leftnav.vue"
export default {
name: "Index",
components:{
Topnav,
Leftnav,
},
data () {
return {
changeleft: true,
}
},
methods: {
ShowChild: function (changeleft) {
//this.changeleft = !this.changeleft
console.log("1")
}
}
}
</script>3. Problem: console.log ("1") does not respond. It seems that ShowChild did not proceed, but the child component can click to switch to the child component, but the parent component is not allowed ,