这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。
作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来说，坑还是要亲自踩过才算圆满。
知识点
组件及组件间通信
计算属性
正文
1. 父组件
这里暂时只涉及系统菜单这一个功能，因此路由暂未涉及。
基本思路是：通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。其中在父组件的绑定click事件中，将传入子组件的showCancel值重置。
这里就涉及第一个小知识点——子组件调用：
首先写好等待被子组件渲染的自定义元素：
<t-header :showCancel=showCancel></t-header>
接着import写好的子组件：
import THeader from "./components/t-header/t-header";
然后在组件中注册子组件：
components: { THeader }
到这里，新入坑的同学可能会比较疑惑这几行代码是怎样把子组件对应到<t-header>标签的，官方文档是这样说的：
当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名);
在 HTML 模板中，请使用 kebab-case;
我的理解是（举例），当自定义元素为<t-header>时，注册组件名可以有三种写法：t-header、tHeader和THeader，在这种情况下注册的组件会自动识别并渲染到<t-header>。
需要注意的是，以上使用的是HTML 模板，是在单文件组件里用<template><template/>指定的模板；另外存在一种字符串模板，是用在组件选项里用template: "" 指定的模板。当使用字符串模板时，自定义标签可以用三种写法，具体情况请移步官方文档 组件命名约定。
这样父组件的雏形就诞生了：
<template> <div @click="hideCancel"> <t-header :showCancel=showCancel></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; } } }; </script>
2. 子组件
子组件中.cancel为打开系统菜单的按钮，.cancel-div为系统菜单，最开始是这个样子：
<template> <div> /*这里是logo和title*/ ... /*这里是用户名和按钮*/ <div> <span>你好，管理员！</span> <span @click.stop="switchCancelBoard"> <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值，这样实现点击子组件控制系统菜单的状态切换；