通过这个问题可以衍生到其他组件的通信问题
背景：一个侧边栏组件 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节点需要则使用即可。
?
?