vue插槽各种注意事项。element-ui里的el-table中的做作用域插槽使用--------------------别人写的太老太烂，还得自己总结

v-slot
在vue2.6中。上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为【#】
子组件用法保持不变，父组件中
slot属性弃用，具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为#插槽名
slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
v-slot属性只能在template上使用，但在只有默认插槽时可以在组件标签上使用
————————————————
版权声明：本文为CSDN博主「别来打扰我」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44166697/article/details/108274625

具名插槽中
== <template v-slot:’ ‘>
v-slot缩写成#
也就是<template #’ '>

//也可以写成v-slot=“default”

我是默认的内容,slot不起名字时默认时defauLt

</templat

作用域插槽其实就是带数据的插槽，即带参数的插槽（所以你能理解具名后面有参数的写法了吧 如： ），简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内

举例element-ui里的el-table的常见作用域插槽写法，很重要，项目开发中很常用



{{ (($attrs[‘current-page’] || 1) - 1) * $attrs{[}^{\prime }page-siz{e}^{\prime }]+scope.$index + 1 }}

这里面的
是el-table自带的
赋值往表格里添加你想要的html格式

解决作用域问题
js复制代码 //父组件father



{{scope.user.firstName }}

js复制代码 //子组件sonslot


{{user.lastName }}


export default {
data() {
return {
user: {
firstName: ‘Jay’,
lastName: ‘wang’
}
}
}
}

页面结果：Jay


解释：子组件有默认的内容wang,如果不传参默认是wang,子组件user作为slot的一个attribute绑定上去，这被称为插槽prop,现在父级作用域可以在带值得slot提供一个名字也就是scope，scope是我们随便起的名字，随便起名字。

作者：Jaychou
链接：https://juejin.cn/post/6966914729562341412
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。



解构插槽prop