使用vue的slot插槽做母板组件

母板组件是啥？

母板跟模板差不多，就是将一些重用性较高的页面结构抽离出来，封装到一个独立的组件里，以便于在各个项目中使用。比如后台管理，经典的头部，尾部，侧边栏与主要内容区域；我们就可以把这个结构封装成一个母板组件，今后只要写后台管理类的项目，就可以直接使用。下面具体来实现一下。

实现一个后台管理的母板组件

假设我们需要实现的是下面这张图的效果：

母板组件命名为layer.vue;为了快速实现这个布局效果，我直接使用element UI来做，其实用什么UI都无所谓，因为我们抽离出来的是一个布局结构，代码大概是这样的:

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

这样很快就可以实现一个后台管理的布局了，但是，如果以后，你又要写同样一个布局，是不是又得复制一份这样的代码呢？而且很可能每个区块里面都有很多其他的子组件在里面，比如像下面这样的代码：

<el-container>
  <el-header>
      <other-child-component></other-child-component>
    </el-header>
  <el-container>
    <el-aside width="200px">
              <el-menu></el-menu>
             <el-tree></el-tree>
        </el-aside>
    <el-container>
      <el-main>
             <el-breadcrumb separator="/"></el-breadcrumb>
              <el-carousel></el-carousel>
                <el-tab></el-tab>
            </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

我们如果仅仅只是为了需要布局结构，而把所有的代码copy一遍，然后删除掉无用的组件和文字，岂不是太浪费时间了。接下来我们用vue的slot来重构一下之前的代码：
layer.vue

<el-container>
  <el-header>
        <slot name="header"></slot>        
    </el-header>
  <el-container>
    <el-aside width="200px">
            <slot name="aside"></slot>
        </el-aside>
    <el-container>
      <el-main>
                <slot name="main"></slot>
            </el-main>
      <el-footer>
                <slot name="footer"></slot>
            </el-footer>
    </el-container>
  </el-container>
</el-container>

我们把第一个例子的代码，用slot替换了所有的文字；在当前母板里，slot相当于是提前占据区域的一块空间，等待后面使用这个slot的组件，填充具体内容；接下来，我们同样来实现例子二的效果，代码如下：
slot.vue

import layer from 'layer.vue'  
export default {
...
components: {
  layer
}
}

<layer>
    <div slot="footer">Footer</div>
    <other-child-component slot="header"></other-child-component>
    <div slot="aside">
           <el-menu></el-menu>
             <el-tree></el-tree>
    </div>
    <div slot="main">
            <el-breadcrumb separator="/"></el-breadcrumb>
            <el-carousel></el-carousel>
            <el-tab></el-tab>
    </div>
</layer>

可以看到，我们在slot.vue里面引入了layer母板组件，可以不用管div的顺序，在slot.vue里面，我们将footer放到了第一个div里面，这不会影响layer母板组件的布局效果；唯一影响具体效果的只有slot属性，slot.vue里元素的slot属性的值对应layer母板组件里slot标签的name属性的值，然后将内容插入到layer母板组件里。
除了不用管div的顺序以外，在母板组件里，无需关心用的是element UI还是bootstrap之类的UI库，因为只需要改变母板组件的class类名(在当前这种情况，需要将自定义标签替换为div等html自带的标签)就行，无需改变结构；
以后所有的项目，如果是同样的布局结构，就无需重复写代码了，直接在那个组件里引入layer.vue就ok了，还是节省了不少时间的。同理，在项目中，其他高频出现的页面组件，也可以试着抽离出一个母板组件，简化组件里代码的复杂度，提高代码的复用性。
利用vue的slot插槽将“布局”封装成为一种组件，为大规模页面开发带来了非常大的便利性。从页面布局的角度我们称之为母板，但如果从布局入手又可以得到各种容器类组件，例如：Panel、Tabs、SideBar等等。