一、slot内容分发简介

slot的本意是位置、槽。slot的作用：获取组件中原有的内容，类似于angular中的transclude指令。

 

二、代码实现

1、slot简单用法（直接使用<slot></slot>）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>slot内容分发</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <popo>我是组件popo中的原内容</popo>
13     </div>
14 
15     <template id='tem'>
16         <div>
17             <h3>我是组件popo</h3>
18             <!-- 显示组件popo中的内容 -->
19             <slot>如果没有原内容，则显示该内容</slot>
20         </div>
21     </template>
22 
23     
24     <script>
25         //vue实例
26         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
27             el:'#hello',
28 
29             //自定义局部组件
30             components:{
31                 'popo':{
32                     template:'#tem'
33                 }
34             }        
35         });
36     </script>
37 </body>
38 </html>

 vue-组件（slot内容分发）_自定义

 

 

2、slot复杂用法（给原内容指定名字）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>slot内容分发</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <popo>
13         我是组件popo中的原内容
14         <ul slot='s1'>
15             <li>111</li>
16             <li>222</li>
17             <li>333</li>
18         </ul>
19         <ol slot='s2'>
20             <li>111</li>
21             <li>222</li>
22             <li>333</li>
23         </ol>
24         </popo>
25     </div>
26 
27     <template id='tem'>
28         <div>
29             <slot name='s1'></slot>
30             <h3>我是组件popo</h3>
31             <!-- 显示组件popo中的内容 -->
32             <slot>如果没有原内容，则显示该内容</slot>
33             <slot name='s2'></slot>
34         </div>
35     </template>
36 
37     
38     <script>
39         //vue实例
40         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
41             el:'#hello',
42 
43             //自定义局部组件
44             components:{
45                 'popo':{
46                     template:'#tem'
47                 }
48             }        
49         });
50     </script>
51 </body>
52 </html>

vue-组件（slot内容分发）_自定义_02