资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue之增加组件扩展性的slot怎么使用

这篇文章主要讲解了“Vue之增加组件扩展性的slot怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue之增加组件扩展性的slot怎么使用”吧!

成都创新互联公司一直在为企业提供服务,多年的磨炼,使我们在创意设计,成都营销网站建设到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过10年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务电信机房托管成都App制作、手机移动建站、网页设计、网络整合营销。

Vue之增加组件扩展性的slot怎么使用

slot 插槽

组件的插槽

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性

  • 让使用者可以决定组件内部的一些内容到底展示什么。

如何去封装这类的组件呢?slot

它们也很多区别,但是也有很多共性

如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。

如何封装合适呢?

抽取共性,保留不同。

最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
是搜索框,还是文字,还是菜单。由调用者自己来决定。

slot基本使用

  • 在子组件中,使用特殊的元素就可以为子组件开启一个插槽。

  • 该插槽插入什么内容取决于父组件如何使用。

通过一个简单的例子,来给子组件定义一个插槽:
中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容
Vue之增加组件扩展性的slot怎么使用





    
    
    Document
    



    
        
        aaaaa
    
             
            

我是子组件

            

hahaha

                     
         

具名插槽 slot

当子组件的功能复杂时,子组件的插槽可能并非是一个

比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?

如何使用具名插槽呢?

  • 只要给slot元素一个name属性即可





    
    
    Document
    



    
        按钮1
        aaaaa
            按钮2
    
             
            

我是子组件

            

hahaha

            
                     
         

作用域插槽

实质:

父组件替换插槽的标签,但是内容由子组件来提供

需求:

子组件中包括一组数据,比如:pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示:

内容在子组件,希望在父组件中展示:

在父组件使用我们的子组件时,从子组件中拿到数据:


        
                             
                    {{item}}                 
                     
    

Vue之增加组件扩展性的slot怎么使用





    
    
    Document
    



    
        
        
            
                {{slot.data.join('-')}}
            
        
        
            
                {{slot.data.join('*')}}
            
        
    
    
        
                             
                    {{item}}                 
                     
         

感谢各位的阅读,以上就是“Vue之增加组件扩展性的slot怎么使用”的内容了,经过本文的学习后,相信大家对Vue之增加组件扩展性的slot怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


文章标题:Vue之增加组件扩展性的slot怎么使用
浏览路径:http://cdkjz.cn/article/jihcip.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220