Vue slot

发布时间:2025-09-18 20:16

JavaScript前端框架:React或Vue的入门 #生活知识# #编程教程#

Eason_qyl 已于 2023-09-14 17:58:54 修改

于 2020-07-15 14:52:02 首次发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。

首先要理解2个知识点:
1.插槽
2.作用域插槽

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个概念这里就点出来了,是显示不显示和怎样显示

作用域插槽实际上是带有数据的插槽,可以获取到父组件传递的参数,将这些参数使用到子组件插槽里

<w-table-column prop="je" label="总价" width="100"> <template slot-scope="scope"><span>{{Number(scope.row.je).toFixed('2')}}</span> </template> </w-table-column>

javascript

运行

其实这一段很多时候也会用到显示表格时,当前行数据的获取也会用到插槽

<el-table> <el-table-column width="150" align="center" label="Status"> <template slot-scope="scope"> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}} </el-tag> </template> </el-table-column> </el-table>

javascript

运行

之前好像直接是scope,现在统一成了slot-scope,其语义更加的明确。
scope相当于一行的数据, scope.row相当于当前行的数据对象。
这里就是用插槽 拿到当前行 row是个内置的属性 ,vue slot的scope传递值是父作用域中的源数据改变,值会同步改变。且{{scope.$index}}可以获取当前行的index。

// index可以用来设置index, :row 可以设置行内内置对象 <slot :row="item" :$index="i"></slot>

javascript

运行

也可以参考此篇讲解,个人感觉写得很详细很到位。
https://blog.csdn.net/houyibing930920/article/details/89513246

网址:Vue slot https://www.yuejiaxmz.com/news/view/1311845

相关内容

vue&Element
vue技巧
关于slot
vue中css样式管理
学习Vue 3中的虚拟列表技术,优化大数据量的渲染效率
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal
element
portal
vue
Vue中 let

随便看看