vuejs的slot（插槽）

vue2 出了一个 slot（插槽）功能，这个功能是用来干嘛的？

无名 slot

我的理解就是一个组件元素里面的内容分发到指定的 slot 位置，例如，我们有一个模板

<template id="layout-tpl">
  <div>
    <slot><h1>my-comp里面没内容，我显示</h1></slot>
  </div>
</template>

然后我们定一个组件

Vue.component('myComp', {
  template: '#layout-tpl',
});

然后要使用它

<div id="app">
  <my-comp></my-comp>
</div>

由于 my-comp 元素里面内容为空，所以slot 会显示，结果渲染为

<div id="app">
  <h1>my-comp里面没内容，我显示</h1>
</div>

如果 my-comp 有内容，slot 就会被替换，查看效果

具名 slot

具名我理解为有具体的名字，声明如下

<slot name="header"></slot>

有了具体名字，那么元素就可以插入到指定的位置

功能更上面一样，就是替换组件元素里面内容，把内容插入到指定的位置

从上面效果可以看出，my-comp 元素里面的内容，有指定 slot 属性的话，就会从上而下按顺序插到对应 slot 的位置，没有指定 slot 属性的话就插到无名子的 slot 位置