032 V slot的两种用法
本帖最后由 不二如是 于 2018-10-27 11:13 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们介绍了slot的定义，本次学习两种常见的slot用法。
在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）。
在父组件模板里，插入子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。
很好理解，用代码演示下：
<div id="myApp">
<child-component>
<p>分发的内容</p>
<p>更多分发的内容</p>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:'\
<div>\
<slot>\
<p>如果父组件没有插入的内容，在下将作为默认出现</p>\
</slot>\
</div>'
});
var app = new Vue({
el:"#myApp"
})
</script>
子组件child-component的模板内定义了一个<slot>元素，并且用一个<p>作为默认的内容。
在父组件没有使用slot时，会渲染这段默认的文本。
如果写入了slot，便会替代整个<slot>，渲染结果为：
<div id="myApp">
<div>
<p>分发的内容</p>
<p>更多分发的内容</p>
</div>
</div>
注意，子组件<slot>内的备用内容，它的作用域是子组件本身。
具名Slot
给slot元素指定一个name后就可以分发多个内容，具名Slot可以和单个Slot共存。
代码示例：
<div id="myApp">
<child-component>
<h1 slot="header">我是标题</h1>
<p>分发的内容</p>
<p>更多分发的内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:'\
<div class="container">\
<div class="header">\
<slot class="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div>\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el:"#myApp"
})
</script>
子组件内声明了3个slot元素，其中在：
<div class="main">
内部的slot没有使用name特性，将作为默认的slot出现，父组件没有使用slot特性的元素与内容将出现在这里。
如果没有指定默认的匿名slot，父组件多余的内容片段都将被抛弃。
上例最终渲染结果：
<div class="container">
<div class="header"><p>分发的内容</p>
<p>更多分发的内容</p></div>
<div class="main"><p>分发的内容</p>
<p>更多分发的内容</p></div>
<div>
<div>底部信息</div>
</div>
</div>
课后作业
1、在子组件内使用特殊的<slot>元素就不可以为这个子组件开启一个slot（插槽）。（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.F 0 1
页:
[1]