slot-scope 从Vue2 到Vue3

在Vue2  中

 <template slot-scope="scope">
            <el-tag
              :type="scope.row.visible === '1' ? 'danger' : 'success'"
              disable-transitions
            >{{ visibleFormat(scope.row) }}</el-tag>
          </template>

在vue3中

<template #default="scope">

<el-tag :type="scope.row.visible === '1' ? 'danger' : 'success'"

disable-transitions

>{{visibleFormat(scope.row) }}</el-tag>

</template>

slot 在 vue 1.x 和 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃

slot-scope 主要也是配合 slot 一块使用，在 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃了。

vue 2.6.0 中引入，为具名插槽和作用域插槽提供新的统一的语法 v-slot 指令，用来代替 slot 和 slot-scope，所以如果 vue 使用的是 2.6 之后的版本就推荐直接使用 v-slot 了。

v-slot:default 可以简写为 v-slot，或者使用 # 作为缩写。例如，<template v-slot="slotProps"> 或 <template #default="slotProps">。
default 是针对匿名插槽的命名，如果是具名插槽，则应该使用对应的插槽名。例如，如果插槽是 name="header"，则使用 v-slot:header。

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

报错`slot` attributes are deprecated

解决方法

<template #title></template>

<template #title="{scope}"></template>