Layout组件的讲解及其源码分析

Layout组件不止一个，而是指一类

Layout组件
总体布局如图所示
在源代码中这几个组件的分工
- Layout组件的逻辑很简单，初始化了一个findSider方法，用来在页面加载的时候判断是否存在Sider组件。通过$children来将Layout所有一级子组件拿出来遍历判断，some方法若找到目标则停止遍历。再通过判断子组件的name是否为Sider判断是否有Sider子组件，若存在则使data中的hasSider为true，从而使名为wrapClasses的类名激活，用来进一步处理样式问题。
```
findSider(){
  return this.$children.some(child => {
     return child.$options.name === 'Sider';
  });
}
```
- Header组件逻辑也十分简单，除了插值slot，没有别的内容，设置了样式。
- Content组件逻辑也十分简单，与Header组件一样，设置了插值和样式名。
- Footer组件逻辑依然十分简单，与前两者一样，仅设置了插值和样式名。
- Sider组件比较复杂，首先我们分析props，因为自定义组件的API主要是三个部分：props、events、slots，分别用来传递属性、自定义事件、承载内容分发。
我们把Sider组件单独拿出来分析：
这里第一个属性value
value属性，是一个布尔值，默认是false，注释写道if it's collpased now，如果它现在是闭合的。也就是说，侧边栏的闭合折叠和展开是通过这个属性来设置的。
这个组件监听的内容正是value值，变化会触发一个事件