Vue中的solt插槽

一、概念：

插槽就是父组件往子组件中插入一些内容。

二、插槽的种类：

有三种方式，默认插槽，具名插槽，作用域插槽

1. 默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据

单个slot （默认插槽 或 匿名插槽）

就是没有名字的插槽，一个组件里面只允许存在一个匿名插槽。

    

        
父组件
        
           
父组件中写的文本
        
    
    

子组件内容

• 父组件在child子组件中放置p标签，子组件中想要显示p标签，就必须放置slot

	

	 	
子组件
	    匿名插槽的默认内容
	

编译结果如下：

child组件slot里的内容会替换成 p标签里面的内容，如果父组件没有在子组件插入内容则会渲染slot里面的默认内容。

     2. 具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的        名字填充到对应的位置。

父组件:

	
	

		
父组件
		
			

				111
			
			

				222
			
			<-- 以下是多余的内容，将会自动填充到匿名插槽中-->
			

				333
			
		
	
	

子组件：

	
	

		
子组件
		// s1插槽
		
		// s2插槽
		
		// 匿名插槽
		
	
	

具名插槽的缩写方式

           以#号形式加上插槽名称

	
	

		
父组件
		
			

				...
			
		
	
	

     3.作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽         数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

  
    

        
父组件
		
		    
		
    
    
    

    
   

注意点1：在Vue 2.6+中，如果只存在默认插槽，可以用以上简写法 ,否则必须完整书写： v-slot:default=“props”
注意点2：在Vue 2.6+ 引入了v-slot 指令，在接下来所有的 2.x 版本中 slot 和 slot-scope 还可以使用，但不会出现在 Vue 3.0 中，详细的内容自己查阅官方文档吧。

子组件内容