获得了计算属性ifShowCancel，组件相应的变成了v-show="ifShowCancel"，我试图在绑定事件里通过this.ifShowCancel=!this.ifShowCancel切换菜单状态，报错，得到报错信息：Computed property "ifShowCancel" was assigned to but it has no setter；
明白了，要以直接赋值的形式改变计算属性ifShowCancel的值，需要一个setter函数，但是setter函数中无法修改prop值，因此在getter中也就无法通过return this.showCancel来更新这个计算属性，所以这个方法貌似也行不通；
到此为止，好像路都成了堵死状态：prop值不能改->要用计算属性；计算属性不能改->需要setter；而写入了getter、setter，计算属性的值依赖于prop值->prop值不能改。——一个堪称完美的闭环诞生了！
走投无路之际我想起了$emit和$on这一对。
3. 父子互相通信
前边的prop实现了从父到子的单向通信，而通过$emit和$on，就可以实现从子组件到父组件的通信：这不能直接修改父组件的属性，但却可以触发父组件的指定绑定事件，并将一个值传入父组件。
在这一步我摒弃了点击按钮时的去操作子组件内属性的想法，既然计算属性ifShowCancel依赖于prop值，那么就在点击按钮时，通过$emit触发父组件的事件，并将需要修改的属性值传入父组件，于是：
/*父组件自定义元素绑定switch-show事件*/ <t-header :showCancel=showCancel @switch-show="switchShow"></t-header> // 父组件js methods: { //会被子组件$emit触发的方法 switchShow(val) { this.showCancel = val; } } // 子组件js methods: { //按钮上的绑定click事件 switchCancelBoard() { this.$emit("switch-show", this.ifShowCancel); } }
这样处理流程就变成了：点击按钮->作为计算属性的ifShowCancel值传入父组件并触发父组件事件，对showCancel赋值->父组件属性更新->触发子组件prop更新->触发重新compute，更新ifShowCancel值->v-show起作用。
另外在点击其他区域时，通过父组件绑定的click事件，就可以重置showCancel值，进而隐藏掉出现的系统菜单。
下边放出这个功能的完整代码。
4. 完整代码
/*父组件*/ <template> <div @click="hideCancel"> <t-header :showCancel=showCancel @switch-show="switchShow"></t-header> <!-- <router-view/> --> </div> </template> <script> import THeader from "./components/t-header/t-header"; export default { name: "app", components: { THeader }, data() { return { showCancel: false }; }, methods: { hideCancel() { this.showCancel = false; }, switchShow(val) { this.showCancel = val; } } }; </script> <style scope lang="stylus"> </style> /*子组件*/ <template> <div> <div> <div></div> <h2>Title</h2> </div> <div> <span>你好，管理员！</span> <span @click.stop="switchCancelBoard"> <div v-show="ifShowCancel"> <ul> <li @click.stop="doSomething" title="用户设置">设置 </li> <li @click.stop="doSomething" title="退出登录">退出 </li> </ul> </div> </span> </div> </div> </template> <script> export default { props: { showCancel: { type: Boolean } }, methods: { doSomething() {}, switchCancelBoard() { // this.ifShowCancel = !this.showCancel; this.$emit("switch-show", !this.ifShowCancel); } }, computed: { ifShowCancel() { return this.showCancel; } } }; </script> <style lang="stylus" scoped> .header-wrapper background: #1C60D1 color: #fff width: 100% height: 50px line-height: 50px position: fixed top: 0px left: 0px font-size: 0 .title-wrapper display: block position: relative float: left height: 50px .logo display: inline-block background-image: url('./logo.png') background-size: 30px 30px background-repeat: no-repeat width: 30px height: 30px margin-top: 10px .title display: inline-block font-size: 16px height: 50px line-height: 50px margin: 0px auto 0px 16px font-weight: normal vertical-align: top .info-wrapper display: block position: relative float: right height: 50px width: 160px font-size: 0 .username display: inline-block height: 50px line-height: 50px font-size: 14px vertical-align: top .cancel display: inline-block vertical-align: middle background-image: url('./cancel.png') background-size: 32px 32px cursor: pointer background-repeat: no-repeat width: 32px height: 32px .cancel-div position: absolute display: block width: 60px height: 80px background: #fff z-index: 50 top: 40px right: 16px font-size: 14px color: #646464 box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4) ul padding-left: 0px margin: 0px li width: 100% height: 40px line-height: 40px text-align: center list-style-type: none &:hover background-color: #eaeaea </style>
总结