032 V slot的两种用法

不二如是

                               
登录/注册后可看大图

上一讲我们介绍了slot的定义，本次学习两种常见的slot用法。

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）。

在父组件模板里，插入子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。

很好理解，用代码演示下：

1. <div id="myApp">
   
2.     <child-component>
   
3.         <p>分发的内容</p>
   
4.         <p>更多分发的内容</p>
   
5.     </child-component>
   
6. </div>
   
7. 
   
8. <script>
   
9.     Vue.component('child-component',{
   
10.         template:'\
    
11.         <div>\
    
12.         <slot>\
    
13.         <p>如果父组件没有插入的内容，在下将作为默认出现</p>\
    
14.         </slot>\
    
15.         </div>'
    
16.     });
    
17. 
    
18.     var app = new Vue({
    
19.         el:"#myApp"
    
20.     })
    
21. </script>

复制代码

子组件child-component的模板内定义了一个<slot>元素，并且用一个<p>作为默认的内容。

在父组件没有使用slot时，会渲染这段默认的文本。

如果写入了slot，便会替代整个<slot>，渲染结果为：

1. <div id="myApp">
   
2.     <div>
   
3.         <p>分发的内容</p>
   
4.         <p>更多分发的内容</p>
   
5.     </div>
   
6. </div>

复制代码

注意，子组件<slot>内的备用内容，它的作用域是子组件本身。

---

具名Slot

给slot元素指定一个name后就可以分发多个内容，具名Slot可以和单个Slot共存。

代码示例：

1. <div id="myApp">
   
2.     <child-component>
   
3.         <h1 slot="header">我是标题</h1>
   
4.         <p>分发的内容</p>
   
5.         <p>更多分发的内容</p>
   
6.         <div slot="footer">底部信息</div>
   
7.     </child-component>
   
8. </div>
   
9. 
   
10. <script>
    
11.     Vue.component('child-component',{
    
12.         template:'\
    
13.         <div class="container">\
    
14.             <div class="header">\
    
15.                 <slot class="header"></slot>\
    
16.             </div>\
    
17.             <div class="main">\
    
18.             <slot></slot>\
    
19.             </div>\
    
20.             <div>\
    
21.             <slot name="footer"></slot>\
    
22.             </div>\
    
23.         </div>'
    
24.     });
    
25. 
    
26.     var app = new Vue({
    
27.         el:"#myApp"
    
28.     })
    
29. </script>

复制代码

子组件内声明了3个slot元素，其中在：

1. <div class="main">

复制代码

内部的slot没有使用name特性，将作为默认的slot出现，父组件没有使用slot特性的元素与内容将出现在这里。

如果没有指定默认的匿名slot，父组件多余的内容片段都将被抛弃。

上例最终渲染结果：

1. <div class="container">
   
2.     <div class="header"><p>分发的内容</p>
   
3.         <p>更多分发的内容</p></div>
   
4.     <div class="main"><p>分发的内容</p>
   
5.         <p>更多分发的内容</p></div>
   
6.     <div>
   
7.         <div>底部信息</div>
   
8.     </div>
   
9. </div>

复制代码

---

课后作业


1、在子组件内使用特殊的<slot>元素就不可以为这个子组件开启一个slot（插槽）。（T/F）




答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.F

一笙彤

0

jack6666

1