vuejs的slot(插槽)

kelen|2017-05-08


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