v-slot 与 slot-scope区别

1. 语法形式与使用位置

• v-slot 只能用于 标签或组件标签上

<template v-slot:default="scope">...</template>
<my-component v-slot:default="scope">...</my-component>

• slot-scope 可以直接用于普通元素标签上

<div slot-scope="scope">...</div>

2. 作用域范围

v-slot 是在 Vue 2.6.0 中引入的，它将插槽的作用域明确限定在 <template> 或组件标签内部，更符合直观的作用域逻辑。
slot-scope 是 Vue 2.5.0 及之前版本中使用的语法，其作用域范围相对不够清晰，在复杂场景下可能会引起混淆。

3. 对具名插槽的支持方式

使用 v-slot 时，具名插槽的写法更简洁，直接在指令后指定插槽名称，如 v-slot:header。
slot-scope 需要配合 slot 属性来指定具名插槽，如 <template slot="header" slot-scope="scope">

4. 与 v-if 等指令的配合

• v-slot 不能与 v-if、v-for 等指令在同一标签上使用，需要将这些指令放在包含 v-slot 的父级或子级标签上。
• slot-scope 可以和 v-if、v-for 等指令在同一标签上使用。

5. 废弃状态

在 Vue 3 中，slot-scope 已被完全废弃，只支持 v-slot 语法。