vue组件-使用插槽分发内容(slot)

slot--使用插槽分发内容（位置、槽口；作用: 占个位置）

官网API： https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

使用组件时，有时子组件不知道会收到什么内容，这是由父组件决定的。

一、单个插槽

1.my-component 组件:

    
我是子组件的标题
    
        这段内容只有在没有要分发的内容时才会显示。
    


2.父组件：

    
我是父组件的标题
    
        
这是一些初始内容
        
这是更多的初始内容
    


3.渲染结果：

    
我是父组件的标题
    

        
我是子组件的标题
        
这是一些初始内容
        
这是更多的初始内容
    

二、具名插槽

slot根据不同的name名称分发内容，多个插槽可以有不同的名字。

仍然可以有匿名的默认插槽，为了找不到匹配的内容片段使用，如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

1.my-component 组件:

    

        
    
    

        
    
    

        
    


2.父组件：


    
这里可能是一个页面标题
    
主要内容的一个段落。
    
另一个主要段落。
    
这里有一些联系信息


3.渲染结果：

    

        
这里可能是一个页面标题
    
    

        
主要内容的一个段落。
        
另一个主要段落。
    
    

        
这里有一些联系信息
    

例子：

Slot插槽.png