本篇文章主要介绍了如何理解Vue的作用域插槽的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记
举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于
本文来源gaodai.ma#com搞##代!^码@网3
,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。
<title>Vue作用域插槽</title> <div id="app2"> <!-- props对象接收来自子组件slot的$index参数 --> <span>{{users[props.$index].id}}</span><span>{{users[props.$index].name}}</span><span>{{users[props.$index].age}}</span><!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->编辑删除</div>
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持gaodaima搞代码网。
以上就是如何理解Vue的作用域插槽的实现原理的详细内容,更多请关注gaodaima搞代码网其它相关文章!