在vue学习组件之路上的作用就是尽量模仿element。预览地址组件之间的通信="mac">MacWindows使用方法快速入门高级配置多语言支持选择发货如图figure,about(selected:被选中的item),menu中的control,通过watchChild“监控每一个item”，一旦menu-item被点击，就会触发this.$emit('menuItemUpdate',this.name)这里的menu会通过menu-item的$emit和$on传递数据watchChild(){this.items.forEach(vm=>{vm.$on('menuItemUpdate',name=>{this.$emit('update:selected',[name])})})},this.items这里是收集的每一个menu-item，一开始就已经做了要使用依赖注入，子组件menu-item直接操作菜单的数据，耦合度很高。//menuprovide(){return{root:this}}//menu-iteminject:['root'],created(){this.root.addItem(this)//.........}，然后告诉菜单项您可以被选中。更新后的钩子函数非常适合这项任务。updated(){this.updateChild()},方法：{updateChild(){this.items.forEach(vm=>{if(this.selected.indexOf(vm.name)>-1){vm.selected=true}else{vm.selected=false}})}}路径元素的收集当menu-item被选中时，触发tellParents函数收集该路径名上的所有父元素，将收集到的数据放入selectedArr中。这也可用于突出显示路径上的父元素。在点击的时候触发onClick函数onClick(){//............letsubFather=this.$parent.$el.classList.contains('x-sub-menu')this.$parent.$el.classList.contains('x-sub-menu')letgroupFather=this.$parent.$el.classList.contains('x-menu-item-group')//……....if(subFather||groupFather){//......this.tellParents(this)//......}else{//......}},tellParents投递调整用自己来收集nametellParents(that){if(that.$parent.$parent.$options.name==='x-sub-menu'||that.$parent.$parent.$options.name==='x-menu-item-group'){this.root.selectedArr.unshift(that.$parent.name)this.tellParents(that.$parent)}else{this.root.selectedArr.unshift(that.$parent.name)console.log(this.root.selectedArr)}}最后，希望在选中menu-item之后，能够关闭该路径的所有弹出框popover，同样需要递归遍历childClosePopover(){if(this.$parent.$options.name==='x-sub-menu'){this.open=falsethis.$parent.childClosePopover()}}，自定义主题颜色的实现参考Menu属性。这里的文字颜色和图标颜色是同步的，hover的css效果和active的text-color文字颜色是一样的。active-color是选定的颜色。back-ground-color正常背景色。active-background-color是选定的背景颜色。数据通过图中的紫色路由传输，通过递归遍历通知菜单树中的每个分支，改变颜色，是否垂直，禁用等。大多数添加的功能通过这条线进行通信。js控制颜色变化watch:{selected(){if(this.selected&&.......{this.$refs.item.style.backgroundColor=.......this.$refs.item.style.color=.........//........}else{//...}}}弹出框问题是对element的操作popupbox就是在body中添加子节点，这是最直接的避免可能出现的overflow:hideen问题的方法。下面的定位只要用js就可以了，还要考虑scroll的问题。最麻烦的部分是动画过渡。单纯的使用css会让弹框回到原点。这里需要使用javascripthooks。上面官网说的很清楚，但是在实现过程中，也有一些坑，动画是瞬间完成的。仅使用JavaScript进行过渡（不使用css）时，官网对此进行了说明。动画会瞬间完成，使用done。后来试了一下，还是不行。这不仅仅是使用JavaScript进行转换。想了想，既然beforeEnter和enter都是瞬间执行，又没有动画事件间隔，何不自己加个settimeout，问题就解决了，可能这个方案不太好吧。这里没有使用$nextTick的原因是enter(el){setTimeout(()=>{//.....})}，hook中设置的一些额外的css属性要在Enter之后改回来，比如overflow:hidden和height导致垂直面板的弹出框不会展开父元素的问题。afterLeave(el){el.style.overflow=''if(this.vertical){el.style.height=''}}，后面是类似于定位弹出框的js操作，在菜单导航菜单我没有没有这样做，后面会改成这个。进入前（el）{el。风格。位置='绝对'el。风格。transform=.......//...},enter(el){//......}，处理一些琐碎的问题，比如hovertrigger和clicktrigger弹出框移出消失的时间控制和动画抖动。突出显示的行仅添加到一级子组件中的菜单项组组件。其实只是作为一个中转站，无非是复制一些功能而已。一些多层嵌套的放置问题，还没搞定。横版遇到的一些css问题，在active下显示亮条。一开始设置了menu-item中的border-bottom，因为同时设置了transition。显示时会出现高度抖动的问题。后来用伪类完成了，但是自定义颜色的时候很麻烦。这种方法也被放弃了。最后只在下方添加一个div而不是border-bottom作为高亮行。方法虽然笨，但是管用。在scoped中为一些子组件添加css样式使用/deep/深度效果。简单总结？其实基于这个明显的数据流，再增加功能无非就是增加功能，修改css。查找错误和维护也相对容易。最后，如果你觉得还不错的话，给我的项目一个star一定很棒。
