Vue2.7中移除slot-scope的方法及兼容性咨询

首先明确：Vue2.7完全支持Vue3的v-slot语法，所以你可以直接用新写法替换旧的slot-scope，无需担心兼容性问题。

1. 具名插槽的替换规则 #

把原来分开的slot="插槽名"和slot-scope="变量名"，合并成v-slot:插槽名="变量名"即可：

旧写法：

<ItemList>
  <template slot="heading" slot-scope="slotProps">
    <h1>My Heading for {{ slotProps.items.length }} items</h1>
  </template>
</ItemList>

新写法：

<ItemList>
  <template v-slot:heading="slotProps">
    <h1>My Heading for {{ slotProps.items.length }} items</h1>
  </template>
</ItemList>

2. 默认插槽的替换规则 #

对于默认插槽，原来的slot-scope="scope"直接替换为v-slot="scope"（默认插槽可以省略:default，写全的话是v-slot:default="scope"）：

旧写法：

<template slot-scope="scope">
  <!-- 插槽内容 -->
</template>

新写法：

<template v-slot="scope">
  <!-- 插槽内容 -->
</template>

如果你的默认插槽是直接写在组件标签上的：

<ItemList slot-scope="scope">
  <!-- 插槽内容 -->
</ItemList>

替换成：

<ItemList v-slot="scope">
  <!-- 插槽内容 -->
</ItemList>

额外提示 #

如果项目代码量较大，可以用ESLint的vue/no-deprecated-slot-attribute和vue/no-deprecated-slot-scope-attribute规则自动检测并修复旧写法，减少手动修改的工作量。

内容的提问来源于stack exchange，提问作者World's famous people