深入理解vue中的 slot-scope=“scope“
更新时间：2022年12月09日 09:12:35 作者：多看书少吃饭
这篇文章主要介绍了理解vue中的 slot-scope=“scope“，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
理解vue的 slot-scope=“scope“
slot是插槽，slot-scope=“scope“语义更加明确，相当于一行的数据，在实际开发中会碰到如下的场景，
这个工作状态是变化的，而我们就可以通过后端返回的具体值来判断这里应该显示什么样的内容
具体代码如下：
<el-table-column label="工单状态" prop="status">
<template slot-scope="scope">
<span style="margin-left: 10px">{{
scope.row.status == "0"
? "待办"
: scope.row.status == "1"
? "处置中"
: "完成"
}}</span>
</template>
</el-table-column>后端返回消息如下
status状态值为0就是代办，为1就是处置，为2就是完成
此外这里每行还有编辑，删除等功能，事件处理函数中的参数，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数我们就可以实现编辑（分配，转派，完工），删除功能，所以这个 slot-scope="scope"是非常重要的
vue中的slot和slot-scope使用
slot是vue中的插槽，它包括匿名插槽（没name属性）和具名插槽（有name属性）
插槽的作用
slot的作用是，让父组件中引用子组件时，包含的内容不被子组件的内容替代，其在父组件中包含的内容，在子组件中就用slot代替，slot所在的位置就是父组件内容想要显示的区域。如下图所示：
父组件：
子组件：
最后结果如下所示：
具名插槽
具名插槽的作用就是给子组件待填充的内容取一个特定的标识，方便知道要插入的是哪段内容
如下图所示：
父组件：
子组件：
结果：
作用域插槽
slot-scope的作用就是让父组件可以使用子组件data里面的数据，使用情况如下：
父组件：
子组件：
结果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下2022-10-10
在本篇文章里我们给大家分享了关于vue中使用echarts图表的实现方法，有兴趣的朋友们学习下。2018-10-10
本篇文章主要介绍了用Vue写一个分页器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了vue swipe自定义组件实现轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
Vue3-新特性defineOptions和defineModel示例详解
在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧2023-11-11
在Vue中使用xlsx库可以帮助我们读取和写入Excel文件,下面这篇文章主要给大家介绍了关于vue中如何使用xlsx读取excel文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue如何实现变量表达式选择器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
解决vue项目,npm run build后,报路径错的问题
这篇文章主要介绍了解决vue项目,npm run build后,报路径错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论