粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放 

  
      
    

        

	
        
		
        
			
        
				
        關于Vue中的slot的理解
        
				
        
					
         2019-8-25      seo達人      
        
					
					
        
						
					
        
				
        
				
			
        
			
        
				
        今天在做vue項目的時候，遇到一個問題就是slot插槽的概念。這突然讓我想起用過類似于element-ui前端框架時，用他們組件的時候接觸過slot，如下圖： 

        


        


        


        
這是element-ui對話框的api，當時我記得我百度過，就是這樣寫就ok了，當時也沒深究。

        


        
<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

        
  <span slot="title">

        
    我是對話框標題

        
  </span>

        
  <!-- 這邊寫對話框的內容 -->

        
  <span>我是對話框內容</span>

        
  <span slot="footer" class="dialog-footer">

        
    我是對話框footer

        
  </span>

        
</el-dialog>

        
效果是這樣：

        


        


        


        
今天研究了，我就查看了源碼：

        


        


        


        
百度的發現這邊有兩個概念：

        


        
1.單個插槽也叫匿名插槽

        


        
slot不帶name，如下：

        


        
<slot></slot>

        
一個子組件只有一個匿名插槽，就好比對話框的內容沒有被含有slot="xx"屬性的標簽包裹，那么就會替換掉匿名插槽

        


        
2.具名插槽

        


        
slot 有name，如下

        


        
<slot name='xx'></slot>

        
具名插槽就可以有多個，就好比對話框含有slot='header'屬性的標簽會替換掉子組件<slot name='header'></slot>

        

        				
        
								
			
        
		
        
		
		
	
        


        
    
  
        
    
        日歷
        
    
        
        
        
        
    
        
  
        
    
    
        
      
        鏈接
        
      
          
                
        
    
        
    
        
      
        個人資料
        
      
        
          
        
                    
        
          
        藍藍設計的小編
          http://www.xintaizi.com
        
      
        
    
        
    
        
      
        存檔