vue中slot（插槽）详解，slot、slot-scope和v-slot

缺乏、安全感 2024-04-17 18:49 56阅读 0赞

# slot是什么 #

slot，也称插槽，可以类比为插卡式的FC游戏机，游戏机（子组件）暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容），游戏机会读取并加载磁条里的游戏  
Vue的slot，是**组件的一块HTML模板**，这块模板**由使用组件者即父组件提供**。可以说是子组件暴露的一个让父组件传入自定义内容的接口。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

# slot的作用 #

让用户可以拓展组件，去更好地复用组件和对其做定制处理  
举一些例子，比如布局组件、表格列、下拉选项

# slot怎么用 #

slot的用法可以分为三类，分别是**默认插槽、具名插槽、作用域插槽**  
**子组件中：**

*  插槽用`<slot>`标签来确定渲染的位置，里面放如果父组件没传内容时的后备内容
 *  **具名插槽**用`name`属性来表示插槽的名字，不传为默认插槽
 *  **作用域插槽**在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接收的对象上

//Child.vue
    <template>
    	<div>
    		<main>
    		//默认插槽
    			<slot>
    				//slot内为后备内容
    				<h3>没传内容</h3>
    			</slot>
    		</main>
    		
    		//具名插槽
    		<header>
    			<slot name="header">
    				<h3>没传header插槽</h3>
    			</slot>
    		</header>
    
    		//作用域插槽
    		<footer>
    			<slot name="footer" testProps="子组件的值">
    			 <h3>没传footer插槽</h3> 
    			</slot> 
    		</footer>
    	</div>
    </template>
    
    <style scoped> div{ border:1px solid #000; } </style>

## 父组件在使用时： ##

*  \*\*默认插槽 \*\*的话直接在子组件的标签内写入内容即可
 *  **具名插槽**是在默认插槽的基础上加上`slot`属性，值为子组件插槽`name`属性值
 *  **作用域插槽**则是通过`slot-scope`获取子组件的信息，在内容中使用。这里可以用解构语法去直接获取想要的属性

// Parent.vue
    <child>
      
      <div>默认插槽</div>  
      
      <div slot="header">具名插槽header</div>
      
      <div slot="footer" slot-scope="slotProps">
        {
       {slotProps.testProps}}
      </div>
    </child>

### 渲染结果为 ###

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

# v-slot #

在vue2.6中。上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为【#】

# 子组件用法保持不变，父组件中 #

*  `slot`属性弃用，具名插槽通过指令参数`v-slot:插槽名`的形式传入，可以简化为`#插槽名`
 *  `slot-scope`属性弃用，作用域插槽通过`v-slot:xxx="slotProps"`的slotProps来获取子组件传出的属性
 *  `v-slot`属性只能在`template`上使用，但在\*\*【只有默认插槽时】\*\*可以在组件标签上使用

//Parent
    <template>
      <child>
       
       <template v-slot>
         <div>默认插槽</div>
       </template>
       
       <template #header>
         <div>具名插槽</div>
       </template>
       
       <template #footer="slotProps">
         <div>
          {
       {slotProps.testProps}}
         </div>
       </template>
      <child>
    </template>

# 拓展用法： #

1.  同样可以通过解构获取`v-slot={user}`,还可以重命名`v-slot="{user:newName}"`和定义默认值`v-slot="{user = '默认值'}"`
2.  插槽名可以是动态变化的`v-slot:[slotName]`

# 注意 #

1.  默认插槽名为`default`,可以省略default直接写`v-slot`,缩写为\#时不能不写参数，写成`#default`(这点所有指令都一样，v-bind、v-on)
2.  多个插槽混用时，v-slot不能省略default

# 作用域插槽的原理 #

slot本质上是返回VNode的函数，一般情况下，Vue中的组件要渲染到页面上需要经过`template>>render function >> NVode >> DOM`过程。组件挂载的本质就是执行渲染函数得到VNode，至于data/props/computed这些属性都是给VNode提供数据来源

在2.5之前，如果是普通插槽就直接是VNode的形式了，而如果是作用域插槽，由于子组件需要再父组件访问子组件的数据，所以父组件下是一个**未执行的函数**`(slotScopre) => return h('div',slotScope.msg)`,接受子组件的slotProps参数，在子组件渲染实例时会调用该函数传入数据。

在2.6之后，两者合并，普通插槽也变成一个函数，只是不接受参数了

# 大纲速记 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/04a881bd8529410fbbfc064c8e5a699f.png
[20190830102548161.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/01f702b63a62413fb7bf6eb059a92378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/de339f7b67fb458eb6cad40bebe199e2.png