【vue】组件中的插槽

古城微笑少年丶 2024-04-01 15:26 78阅读 0赞

![在这里插入图片描述][8e32613409764f7ab699731192238cb2.jpeg_pic_center]

--------------------

## 一、什么是插槽： ##

> **`<slot></slot>`  
> 插槽：预留的位置，父组件在使用时在组件标签中间写的内容，会填充到slot的位置  
> 即使用组件时，可以往插槽中传递内容**

## 二、插槽分类 ##

### 1、默认插槽 ###

直接写在组件中的内容，会填充到默认的插槽中（没有用name属性起名字的插槽）  
![在这里插入图片描述][659d933410cc4d478628d26bd99dd4f5.png]

#### Slot.vue(子组件) ####

<template>
    	<div class="box1">
    		box1
    		<slot></slot>
    	</div>
    	
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				
    			}
    		},
    		methods:{
        
    			
    		}
    	}
    </script>
    
    <style>
    	.box1{
        
    		width: 100px;
    		height: 100px;
    		background:darkcyan;
    	}
    </style>

#### App.vue(父组件) ####

<template>
    	<slot1>
    		<h2>studing</h2>
    	</slot1>
    </template>
    
    <script>
    import slot1 from './components/Slot1.vue'
    export default {
        
    	data(){
        
    		return{
        
    		
    		}
    	},
    	methods:{
        
    		del(index){
        
    			this.stu1.splice(index,1)
    		}
    	},
    	name: 'App',
    	components: {
        
    	slot1
      }
    };
    </script>
    
    <style>
    
    </style>

#### 效果图 ####

![在这里插入图片描述][4944f30c546d4416aed3493e01c3d073.png]

### 2、具名插槽：通过name属性给插槽起名字 ，有名字的插槽称为具名插槽 ###

#### 注意1 ####

> 父组件中通过这种形式去子组件中填充内容(固定的)  
> `<template v-slot:s1>working</template>`

> **`<template v-slot:s1>working</template>`  
> 可以简写成  
> `<template #s1>working</template>`**

![在这里插入图片描述][f2e963fbfb334d418531c56677ac8e82.png]

![在这里插入图片描述][33d3fdbc119b4a4da8ff0c76c81d350c.png]

#### 子组件 ####

<template>
    	<div class="box1">
    		box1
    		<slot></slot>
    	</div>
    	
    	<div class="box2">
    		box2
    		<slot name="s1"></slot>
    	</div>
    	
    	<div class="box3">
    		box3
    		<slot name="s2"></slot>
    	</div>
    	
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				
    			}
    		},
    		methods:{
        
    			
    		}
    	}
    </script>
    
    <style>
    	.box1{
        
    		width: 100px;
    		height: 100px;
    		background:darkcyan;
    		float: left;
    	}
    	.box2{
        
    		width: 100px;
    		height: 100px;
    		background:gold;
    		float: left;
    	}
    	.box3{
        
    		width: 100px;
    		height: 100px;
    		background:burlywood;
    		float: left;
    	}
    </style>

#### 父组件 ####

<template>
    	
    	<slot1>
    		
    		<h2>studing</h2>
    		<template v-slot:s1><h2>working</h2></template>
    		<template v-slot:s2><h2>playing</h2></template>
    	</slot1>
    </template>
    
    
    <script>
    import slot1 from './components/Slot1.vue'
    export default {
        
    	data(){
        
    		return{
        
    			
    		}
    	},
    	methods:{
        
    		del(index){
        
    			this.stu1.splice(index,1)
    		}
    	},
    	name: 'App',
    	components: {
        
    	slot1
      }
    };
    </script>
    
    <style>
    
    </style>

#### 效果图展示 ####

![在这里插入图片描述][fb10f9245e7e4c14933463d738a2c989.png]

![在这里插入图片描述][2a40f0d237714d278f7989490da0a6d7.png]

### 3、作用域插槽 ###

在组件中定义插槽的时候，给插槽中预留位置用在接收data中的传过来的数据；  
其他组件在使用这个组件的时候，可以获得该传递过来的数据

**`简单总结：`  
`定义插槽的时候，把一些数据传出去（例如:item="info"）就是把这些数据绑定到插槽上面；`  
`当用到这个插槽的时候，在插槽后面用个="变量"，去接收；变量通常使用scope`  
`除了name属性，其他的属性都会被打包成一个对象，传递给变量；`**

![在这里插入图片描述][8a0b150cd11548f7aee4235fb3d4c954.png]

Slot.vue

<template>
    	<div class="box4">
    		box4
    		<slot></slot>
    	</div>
    	
    	<div class="box5">
    		box5
    		<slot name="s1" :item="info"></slot>
    	</div>
    	
    	<div class="box6">
    		box6
    		<slot name="s2"></slot>
    	</div>
    	
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				info:{
        id:1,
    					  name:'zs',
    					  age:18,
    					  },
    				}
    			}
    		}
    	
    </script>
    
    <style>
    	.box1{
        
    		width: 200px;
    		height: 200px;
    		background:darkcyan;
    		float: left;
    	}
    	.box2{
        
    		width: 200px;
    		height: 200px;
    		background:gold;
    		float: left;
    	}
    	.box3{
        
    		width: 200px;
    		height: 200px;
    		background:burlywood;
    		float: left;
    	}
    </style>

App.vue

<template>
    	<slot2>
    		
    		<template v-slot:s1='scope'>
    			<h3>信息:{
        {
        scope}}</h3>
    			<h3>姓名:{
        {
        scope.item.name}}</h3>
    		</template>
    	</slot2>
    	
    </template>
    
    <script>
    
    import slot2 from './components/Slot2.vue';
    
    export default {
        
    	data(){
        
    		return{
        
    			stu1:[
    				{
        id:1,name:'zs',age:18},
    				{
        id:2,name:'lisi',age:19},
    				{
        id:3,name:'ww',age:17}
    			],
    			stu2:[
    				{
        id:1,name:'zs',age:18},
    				{
        id:2,name:'lisi',age:19},
    				{
        id:3,name:'ww',age:17}
    			],
    		}
    	},
    	methods:{
        
    		del(index){
        
    			this.stu1.splice(index,1)
    		}
    	},
    	name: 'App',
    	components: {
        
    	slot2
      }
    };
    </script>
    
    <style>
    
    </style>

效果展示：  
![在这里插入图片描述][a3a995e91edd4aabb053b7e48a7ef5e2.png]

--------------------

![在这里插入图片描述][b55e997a14b74a338440b1403e22cd00.jpeg_pic_center]

[8e32613409764f7ab699731192238cb2.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9813b714849e41178c4b4f136876c900.jpeg
[659d933410cc4d478628d26bd99dd4f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e3ed5110b3fd4e64877017239b31a9eb.png
[4944f30c546d4416aed3493e01c3d073.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2516aa24d4894735b1e30ae64a0cea15.png
[f2e963fbfb334d418531c56677ac8e82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5e0a9c35ecfa4315af2f7d177fbd4838.png
[33d3fdbc119b4a4da8ff0c76c81d350c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/414515867d13495881ff9fa54ef13ec7.png
[fb10f9245e7e4c14933463d738a2c989.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a3e07b0117b9453990a6cb9e2354dd11.png
[2a40f0d237714d278f7989490da0a6d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/050808567e1a41e59e0a2e122af808e0.png
[8a0b150cd11548f7aee4235fb3d4c954.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b0b63f0e319048ffa5310b963bd560ef.png
[a3a995e91edd4aabb053b7e48a7ef5e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5ce0aa563788459faa514ecf3f6e5f1b.png
[b55e997a14b74a338440b1403e22cd00.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/de0113c0099f4838861c4ead1af5500a.jpeg