vue slot擼一擼

vue使用過程中接觸到slot，一番操作下有以下記錄：

①單個：父組件引用子組件的時候，寫在子組件中的內容插入到了子組件中的slot位置；

 <div id="app">  
    <children>  
        <span>slot內容</span> 
        <!-- 如果在子組件中沒有slot，則不顯示 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 註冊子組件，上方引用子組件中的span標籤會替代子組件中的slot位置
                template: "<button><slot></slot>這裏纔是子組件真正的內容</button>"  
            }  
        }  
    });  
</script>  

②多個：放到不同的位置；

 <div id="app">  
    <children>  
        <span slot="one">slot內容1</span>
        <span slot="two">slot內容2</span>
        <!-- 父組件引用時給標籤添加slot屬性,子組件渲染時設置name屬性，值對應引用時的slot屬性值 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 註冊子組件，上方引用子組件中的span標籤會替代子組件中的slot位置
                template: "<button><slot name="one"></slot>我的前面是第一個，後面是第二個<slot name="two"></slot></button>"  
            }  
        }  
    });  
</script> 

③子組件slot標籤中有內容時，而父組件中的對應的slot也有內容時，則會被父組件中的替換；如果父組件中沒有引用引用對應的slot時，則顯示子組件中slot中的內容

 <div id="app">  
    <children>  
        <span slot="one">slot內容1</span>
        
        <!-- 父組件引用時給標籤添加slot屬性,子組件渲染時設置name屬性，值對應引用時的slot屬性值 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 註冊子組件，上方引用子組件中的span標籤會替代子組件中的slot位置
                template: "<button><slot name="one">這裏面有內容</slot>我的前面是第一個，後面是第二個<slot name="two">引用我的沒有內容，所以我顯示</slot></button>"  
            }  
        }  
    });  
</script>