v2和v3插槽的区别

v2和v3同样都有默认、具名、作用域插槽，v3在语法上有一些升级和增加

默认插槽在v2和v3中语法都是一样的，就不说了

具名插槽

具名插槽的定义在v2和v3语法也是一样，不同的是使用插槽的语法

定义

vue2

<slot name="v2Slot"></slot>

vue3

<slot name="v3Slot"></slot>

使用

• vue2中使用具名插槽需要给标签中添加slot="插槽名"属性
• vue3则需要使用v-slot:插槽名属性，并且v-slot指令只能使用在template标签中
  • v-slot指令可简写为#

vue2

<template slot="v2Slot">插槽内容</template>

vue3

<template v-slot:v3Slot>插槽内容</template>

<!-- 简写 -->
<template #v3Slot>插槽内容</template>

作用域插槽

作用域插槽是在具名插槽上的升级，可以在具名插槽是传递数据

同样作用域插槽的定义在v2和v3语法也是一样，不同的是使用插槽的语法

定义

vue2

<slot name="v2Slot" :num="123"></slot>

vue3

<slot name="v3Slot" :num="123"></slot>

使用

• vue2中接受插槽传来的值需要使用slot-scope属性，其值为一个对象，传递的属性在这个对象中
• vue3中同样需要使用v-slot指令，指令参数为插槽名，指令值为传递的数据对象

vue2

<template slot="v2Slot" slot-scope="data">{{ data.num }}</template>

vue3

<template v-slot:v3Slot="data">{{ data.num }}</template>

<!-- 简写 -->
<template #v3Slot="data">{{ data.num }}</template>

$slots\mathrm{和}$scopeSlots

在vue2中，$slots\mathrm{和}$scopeSlots都是一个对象，不同的是$slots\mathrm{里}\mathrm{面}\mathrm{是}Vnode\ast \ast \mathrm{数}\mathrm{组}\ast \ast ，$scopeSlots里面是返回Vnode数组的函数

• $slots可以获取所有默认插槽和具名插槽
• $scopeSlots也可以获取所有默认插槽和具名插槽，但另外包含作用域插槽

在vue3中：$slots可以获取所有插槽类型