基于VUE的跨组件处理侧边栏收缩问题

通过这个问题可以衍生到其他组件的通信问题

背景：一个侧边栏组件 aside.vue 和一个包含头部的组件 index.vue，在index中有用来控制aside的收缩与展开。

声明：所有组件均为Element UI 组件

一、学习过程描述

1、 通过查询element的官网可以知道控制侧边栏收缩的属性为Collapse，为其设置Boolean值即可控制其收缩与展开，默认false为展开。

2、 在对应的<el-menu>组件添加属性collapse并动态绑定isCollapse；

3、 在data中为isCollapse设置布尔值

4、调整侧边栏的宽度，将侧边栏宽度设置为auto

注意： element对侧边栏模板有一个默认的宽度300px，因此不可简单的把设置宽度的代码删除。

5、 因为需要跨组件，则在aside.vue为prop设置下面的代码

prop: ['is-collapse']
// isCollapse 在prop的数组定义中需要把有驼峰的地方分开，并且所有字母小写

6、 转到index.vue中，把之前设置的isCollapse剪切到index的data中，并在app-aside组件绑定该值，像下面那样：

<!-- <AppAsider /> 用大写的也可,用小写的也可,用小写的就要注意在后面的大写子目前加上短杠-->
<app-asider
  class="aside-menu"
  :isCollapse="isCollapse"
  />

到这里，父组件的iscollapse就可以控制侧边栏的收缩了

7、 为控制它的组件添加点击事件或者其他事件用来改变侧边栏，像下面这样

<i
  :class="{
    'el-icon-s-fold':!isCollapse,
    'el-icon-s-unfold':isCollapse
    }"
  @click="isCollapse = !isCollapse"></i>

这里的class我我也顺便进行了动态绑定，用来改变图标以提示用户。

到这里，跨组件进行控制的代码已经完成。

二、总结

实现 组件1 对 组件2 的控制，可以在组件1中定义一个参数，然后把参数传递给组件2，组件2使用prop接收参数（这里使用的是数组的方法，需要注意“驼峰写法”到“短杠+小写”的转换），哪个DOM节点需要则使用即可。