Vue：插槽(Slot)使用
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似，本篇也是对所学内容做一个梳理。
Slot（插槽）分发内容
形式上看，Slot的设计对应了angular中的ng-tranclude属性，即用该方法来确定在何处放置嵌入部分。
ng-transclude使用
html内容
|
1 |
<my-msg>{{msg}}</my-msg> |
模版内容
|
1 2 3 4 |
<div> <p>Here comes the message.</p> <div ng-transclude></div> </div> |
渲染结果
|
1 2 3 4 |
<div> <p>Here comes the message.</p> {{msg}} </div> |
可以看出，形式上，Angular是把ng-transclude标签替换为要使用的模板内容。
Slot的使用
匿名slot
举个栗子，在Vue中，我们会这么写带slot的组件：
组件模板
|
1 2 3 4 |
<div> <h2>我是子组件的标题</h2> <slot></slot> </div> |
父组件模版
|
1 2 3 4 5 6 7 |
<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div> |
渲染结果
|
1 2 3 4 5 6 7 8 |
<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div> |
对比一下，是不是和ng-transclude十分类似？Slot所做的工作，也是把父组件中的“内容”被放入了slot，并将组合后的组件模版返回到父组件。这里slot标签里的内容实际并没有显示，被当作了备用内容（只有在宿主元素为空，没有要插入的内容时才显示）。
更进一步地，Vue给出了具名Slot也作用域插槽这两个比较独特的设计。
具名slot
上面栗子中使用的是匿名slot，即该节点不携带任何其也特征信息。对应的，Vue也提供了具名slot。简单来讲，具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置，就会依次插入匿名的slot中，当没有找到匿名slot时，这段内容就会被抛弃掉。
组件模版
|
1 2 3 4 5 |
... <slot name="header"></slot> <slot name="footer"></slot> <slot></slot> ... |
父组件模版
|
1 2 3 4 5 |
... <p>Lack of anonymous slot, this paragraph will not shown.</p> <p slot="footer">Here comes the footer content</p> <p slot="header">Here comes the header content</p> ... |
渲染结果
|
1 2 3 |
<p>Here comes the header content</p> <p>Here comes the footer content</p> <p>Lack of anonymous slot, this paragraph will not shown.</p> |
转载请注明转自：Vue：插槽(Slot)使用
看不懂，支持一个。
现在到处是这类，移动开发经常用到，然而我没有怎么学…
2.1.0 新增的作用域插槽
我一直想不出来应用的场景，困惑了我1天了。
http://cn.vuejs.org/v2/guide/components.html#作用域插槽