Vue组件之作用域插槽的示例分析-创新互联
小编给大家分享一下Vue组件之作用域插槽的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
在泉山等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站制作、成都网站设计 网站设计制作按需设计网站,公司网站建设,企业网站建设,品牌网站设计,成都营销网站建设,外贸网站制作,泉山网站建设费用合理。写作用域插槽之前,先介绍一下Vue中的slot内容分发:
如果
标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的“
父组件如果没有插入内容,我将被显示
”这一则内容,但如果
标签之间有插入内容的话,则子组件模板中的
标签以及之间的内容都会被替换成
标签之间插入的内容。这里子组件
作用域插槽:
显示结果:
template内可以通过临时变量props来访问来自子组件插槽的数据msg
作用域插槽更具代表性的用例是列表组件:
子组件
接受一个父组件传过来的books数组。并且将它在name为book的slot上使用v-for循环,同时暴露变量bookName,父组件的my-list标签内就可以通过props.bookName访问到绑定的数据;
作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致;
补充:vue插槽和作用域插槽的理解
插槽:
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。
作用域插槽:
插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
-
{{ todo.text }}
slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。在vue 2.5.0+ slot-scope不再限制在元素上使用,而可以用在插槽内的任何元素或组件上。
看完了这篇文章,相信你对“Vue组件之作用域插槽的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
分享文章:Vue组件之作用域插槽的示例分析-创新互联
网页URL:http://hbruida.cn/article/jdgoo.html