Vue——slot的含义是什么， slot之详细解释

slot 英文的意思是“插槽”的意思，vue用这个词做标签，意思是能够在这个标签里插入一些东西，是由调用组件（父组件）向其调用的子组件里插入一些东西的一个解决办法。

slot的语法如下：

以上这段代码是书写在需要支持插入能力的子组件里的，有了这段标签代码后，子组件就支持父组件向其内部插入东西了。

一个支持slot的子组件的模板html如下：

调用subcomponent组件的符组件如果需要在子组件里面插入一些东西，父组件必须在调用子组件的地方输入标签，即在子组件的名称标签里写标签或文本内容。

一个父组件的样本代码如下：

可以在子组件里书写多个slot标签，如果这些slot标签不添加name属性，则就是说这些slot不具有名称，这些slot插槽将插入父组件调用子组件时书写在子组件标签中没有 slot的标签的内容。 

一个具名子组件的样本如下：

    
        
如果父组件没用插入内容,我将作为默认出现
    
    

    
         
如果父组件没用插入内容,我将作为默认出现xxx
    
    

 父组件的调用具名slot的子组件的代码如下：

我自己的东西
    
    
插入到子组件里的内容，不具名
			
    
插入到子组件XXX slot里的内容
    
插入到子组件里的内容，不具名0000
    
插入到子组件里的内容，不具名2222

一个包含具名slot的单文件slot的测试样本如下

这是一个独立的完整文件，可以直接复制->粘贴->另存为文件到web目录下做测试：

    
    


    

		
调用组件自己的东西
		
		
		
        
        
            
插入到子组件里的内容，不具名
			
			
插入到子组件具名xxx的slot里的内容
			
插入到子组件里的内容0000，不具名
			
插入到子组件里的内容2222，不具名
        
		
		
            
插入到子组件里的内容2
			
			
插入到子组件XXX slot里的内容2
        
    
    
    

    
	

如果没有指定默认的匿名slot, 父组件调用子组件时子组件名称标签标签内的内容片段都将被丢弃。