十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了Vue中的插槽是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目成都网站制作、做网站、外贸营销网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元平果做网站,已为上家服务,为平果各地企业和个人服务,联系电话:13518219792
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。
后面越来越发现插槽的好用。
分享一下插槽的一些知识吧。
一、插槽内容
一句话:插槽内可以是任意内容。
先看一下下面的代码:声明一个child-component组件,
如果现在我想在
你好
输出内容还是在组件中的内容,在
我们现在给组件增加一个
我们在
Vue.component('child-component',{ template:`Hello,World!` })
到现在,我们知道了什么是插槽:
插槽就是Vue实现的一套内容分发的API,将
这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!
二、具名插槽
具名插槽,就是给这个插槽起个名字
在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。
然后再
而没有名字的,就是默认插槽!!
漂亮、美丽、购物、逛街 帅气、才实 我是一类人, 我是默认的插槽
3、作用域插槽
之前一直没搞懂作用域插槽到底是什么!!!
说白了就是我在组件上的属性,可以在组件元素内使用!
先看一个最简单的例子!!
我们给
我们把a打印一下发现是 {"say" : "你好"},也就是slot上面的属性和值组成的键值对!!!
这就是作用域插槽!
我可以把组件上的属性/值,在组件元素上使用!!
{{a}}
再看一下下面的例子:
{{a}}
看一下输出结果
以上就是了解一下Vue中的插槽的详细内容,更多请关注创新互联其它相关文章!
感谢你能够认真阅读完这篇文章,希望小编分享的“Vue中的插槽是什么”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!