vue：菜单收缩功能

想要实现：点击菜单能收缩。（效果如下：）

 

点击前：           点击后：

 

 

思路：

 

    首先我们要知道绅缩的按钮和菜单是否在一个页面。在一个页面就简单了。

 

    如果不在一个页面，就会涉级到父子级传参，绅缩按钮模块中要把状态传给header，这是兄弟间的传递参数，需要用到 vuex。如果不用vuex的话，就通过主体去操作。绅缩按钮把状态传给主体是子传父，通过 this.$emit()。主体把状态传给菜单，是父传子，通过props ，菜单中需要接收主体中传过来的东西，要在 data 中定义props 在里面定义type、required、default。如果不清楚props 是啥，请百度。

 

操作：

 

1､先看整体布局

 

 

2､menu 模块

 

    

 

3､header 模块