Vue 组件&组件之间的通信之使用slot分发内容-优快云博客

slot详细介绍网址：https://cn.vuejs.org/v2/api/#slot

有时候我们需要在自定义组件内书写一些内容，例如： <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢？

Vue提供了一个极为方便的内置组件<slot>；

初始界面：

初始demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 使用slot分发内容</title>
    </head>
    <body>
        <div>
            
            
            <my-component-a></my-component-a>    
        </div>
    </body>
    <template id="template-a">
        <div>
            <h1>my-component-a</h1>
            
            
            <hr />
        </div>
    </template>
    
    
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        let comA = {
            template :  "#template-a"
            
        
        
        }
        
        new Vue({
            data:{
                
            },
            components : {
                "my-component-a" : comA
                
            }
            
            
        }).$mount('div');
    </script>
</html>

slot放在那里，获取到的内容就放在那里：

可以根据其name属性进行排其位置：

定义属性name的demo

<div>
            
            
            <my-component-a>
                
                <h1 slot='title'>大标题</h1>
                <ol slot='olli'>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    
                </ol>
                <a href="#" slot='res'>点我</a>
            </my-component-a>    
        </div>
    </body>
    <template id="template-a">
        <div>
            <slot name='title'></slot>
            <h1>my-component-a</h1>
             <slot name='olli'></slot>
              <slot name='res'></slot>
            
            
            
            <hr />
        </div>
    </template>

使用slot分发内容总的demo：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title> 使用slot分发内容</title>
 6     </head>
 7     <body>
 8         <div>
 9             
10             
11             <my-component-a>
12                 
13                 <h1 slot='title'>大标题</h1>
14                 <ol slot='olli'>
15                     <li>a</li>
16                     <li>b</li>
17                     <li>c</li>
18                     
19                 </ol>
20                 <a href="#" slot='res'>点我</a>
21             </my-component-a>    
22         </div>
23     </body>
24     <template id="template-a">
25         <div>
26             <slot name='title'></slot>
27             <h1>my-component-a</h1>
28              <slot name='olli'></slot>
29               <slot name='res'></slot>
30             
31             
32             
33             <hr />
34         </div>
35     </template>
36     
37     
38     <script type="text/javascript" src="../js/vue.js" ></script>
39     <script>
40         let comA = {
41             template :  "#template-a"
42             
43         
44         
45         }
46         
47         new Vue({
48             data:{
49                 
50             },
51             components : {
52                 "my-component-a" : comA
53                 
54             }
55             
56             
57         }).$mount('div');
58     </script>
59 </html>