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位置