}
}
};
</script>
2. 子组件
子组件中.cancel为打开系统菜单的按钮，.cancel-div为系统菜单，最开始是这个样子：
<template>
<div class="header-wrapper">
/*这里是logo和title*/
...
/*这里是用户名和按钮*/
<div class="info-wrapper">
<span class="username">你好，管理员！</span>
<span class="cancel" @click.stop="switchCancelBoard">
<div class="cancel-div" v-show="showCancel">
<ul>
<li @click.stop="doSomething" title="用户设置">设置 </li>
<li @click.stop="doSomething" title="退出登录">退出 </li>
</ul>
</div>
</span>
</div>
</div>
</template>按照踩坑之前的思路，在子组件接到showCancel值后用v-show控制显示隐藏，那么在父子组件的绑定click事件中只需要根据情况更改showCancel值就可以了，只要注意对系统菜单内几个选项的绑定事件不要触发父子组件上的绑定事件——总不能一点菜单它就没了，所以在绑定事件中用到了.stop，即
@click.stop="doSomething"于是万事大吉，也就是像这样：
<script>
export default {
props: {
showCancel: {
type: Boolean
}
},
methods: {
doSomething() {},
switchCancelBoard() {
this.showCancel = !this.showCancel;
}
},
computed: {
ifShowCancel() {
return this.showCancel;
}
}
};
</script>然而第一波踩坑之后一起表明显然我还是太年轻。下面是一些不好的示范：
prop来的showCancel值的确可以用，点击子组件按钮的时候，
this.showCancel=!this.showCancel实现了菜单的显示/隐藏，但是一打开控制台，每次点击贡献了一条报错：
vue.esm.js?efeb:578 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.
意思是：避免修改prop值，因为父组件一旦re-render，这个值就会被覆盖；
另外，尽管在这个按钮上实现了显示状态的切换，但是点击其他区域的时候，并不会隐藏它，原因是：子组件prop值的变化并没有影响到父组件，因此showCancel的值一直保持初始值没有变化，而只有在这个值被更新时才会触发子组件中相关值的更新。
——好吧，那么老老实实的用一个计算属性接收showCancel值，这样实现点击子组件控制系统菜单的状态切换；
