通过组件外的一个按钮控制菜单的折叠,涉及到兄弟组件的传值问题,可以使用的方法有以下几种:
通过父组件来进行数据传递
通过vuex或是本地存储进行保存数据,进行传递
通过eventBus总线传递
这里主要用bus总线传值:
1、首先创建一个新的vue实例
![](https://i-blog.csdnimg.cn/blog_migrate/9079be47bef3efeddc48d77e10096e98.png)
2、需要发送数据的组件A(按钮)
先引入,后发送数据
![](https://i-blog.csdnimg.cn/blog_migrate/fec7c9a6a0884292f84c20e855a06c12.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e979a480bb02a8207ae02e70e546f0e1.png)
3、需要接收数据的组件B(导航菜单)
先引入,后接受数据
![](https://i-blog.csdnimg.cn/blog_migrate/fc90fa80ff8be5d3093c685117a0b191.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a4097ce13763b83c37e5f9278367fa64.png)
这样就可以实现组件通信,通过按钮发送数据到导航菜单,来控制菜单的显示隐藏,以及控制导航栏的宽度变化。
这里因为导航菜单放到了el-aside标签里,标签的自带样式导致导航菜单折叠自带的更改宽度的功能失效,需要手动更改导航宽度。
![](https://i-blog.csdnimg.cn/blog_migrate/9fc26216d68ea8541f83bc0ee2174697.png)