vue作用域插槽有什么用


这篇文章给大家分享的是有关vue作用域插槽有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。作用域插槽
利用好作用域插槽可以做一些很有意思的事情,比如定义一个基础布局组件A,只负责布局,不管数据逻辑,免费云主机域名然后另外定义一个组件B负责数据处理,布局组件A需要数据的时候就去B里面去取。假设,某一天我们的布局变了,我们只需要去修改组件A就行,而不用去修改组件B,从而就能充分复用组件B的数据处理逻辑,关于这块我之前写过一篇实际案例,可以点击这里查看。
这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据,之前是利用slot-scope,自vue 2.6.0起,提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如,我们定一个名为current-user的组件:
父组件引用current-user的组件,但想用名替代姓(老外名字第一个单词是名,后一个单词是姓):
这种方式不会生效,因为user对象是子组件的数据,在父组件里面我们获取不到,这个时候我们就可以通过v-slot
来实现。
首先在子组件里面,将user作为一个元素的特性绑定上去:
之后,我们就可以在父组件引用的时候,给v-slot带一个值来定义我们提供的插槽 prop 的名字:
这种方式还有缩写语法,可以查看独占默认插槽的缩写语法,最终我们引用的方式如下:
相比之前slot-scope代码更清晰,更好理解。感谢各位的阅读!关于“vue作用域插槽有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: Java的StringBuilder在高性能场景下怎么正确使用

这篇文章主要介绍了Java的StringBuilder在高性能场景下怎么正确使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Java的StringBuilder在高性能场景下怎么正确使用文章都会有所收获,下面我们一起来看看吧。关…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 07/18 10:02
Next 07/18 10:02

相关推荐