Vue中的插槽是什么-创新互联

这篇文章主要介绍了Vue中的插槽是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司自2013年创立以来,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站制作、外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元淮安区做网站,已为上家服务,为淮安区各地企业和个人服务,联系电话:13518219792

Vue中的插槽是什么

Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。

后面越来越发现插槽的好用。

分享一下插槽的一些知识吧。

一、插槽内容

一句话:插槽内可以是任意内容。

先看一下下面的代码:声明一个child-component组件,

如果现在我想在内放置一些内容,结果会是怎样?


    

你好

输出内容还是在组件中的内容,在 内写的内容没起作用。

Vue中的插槽是什么

我们现在给组件增加一个插槽

我们在内写的"你好"起作用了!!!

Vue.component('child-component',{
        template:`
            
            Hello,World!                          
        `     })

Vue中的插槽是什么

到现在,我们知道了什么是插槽:

插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!

二、具名插槽

具名插槽,就是给这个插槽起个名字

在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。

然后再内,slot属性对应的内容都会和组件中name一一对应。

而没有名字的,就是默认插槽!!


    
        
            漂亮、美丽、购物、逛街
        
        
            帅气、才实
        
        
            我是一类人,             我是默认的插槽         
    

3、作用域插槽

之前一直没搞懂作用域插槽到底是什么!!!

说白了就是我在组件上的属性,可以在组件元素内使用!

先看一个最简单的例子!!

我们给元素上定义一个属性say(随便定义的!),接下来在使用组件child,然后在template元素上添加属性slot-scope!!随便起个名字a

我们把a打印一下发现是 {"say" : "你好"},也就是slot上面的属性和值组成的键值对!!!

这就是作用域插槽!

我可以把组件上的属性/值,在组件元素上使用!!


    
        
      

            {{a}}
        
    

再看一下下面的例子:


    
        
            {{a}}
        
    

看一下输出结果

Vue中的插槽是什么

以上就是了解一下Vue中的插槽的详细内容,更多请关注创新互联其它相关文章!

感谢你能够认真阅读完这篇文章,希望小编分享的“Vue中的插槽是什么”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站名称:Vue中的插槽是什么-创新互联
浏览路径:http://scyanting.com/article/cdsejg.html

其他资讯