vue中作用域插槽的示例分析

小编给大家分享一下vue中作用域插槽的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、网络营销推广、网站程序开发、HTML5响应式网站建设手机网站开发、微商城、网站托管及成都网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为墙体彩绘行业客户提供了网站推广服务。

具体如下:

Vue.component('child', {
   data: function () {
     return {
       list: [1, 2, 3]
     }
   },
   template: '
          
                {{item}}           
         
' })

那么,我们要想让父组件每一次调用子组件时再定义显示方式,也就是说,在子组件中定义好了v-for循环了list,具体怎么显示,由父组件告诉我。那么在子组件中定义一个slot插槽,在父组件中添加一个作用域插槽【需要用template包裹】,在其内写显示的样式。

父组件需要得到子组件数据时,就需要template标签。




  
  vue中作用域插槽
  



  
    
      
  • {{props.item}}
  •        

    以上是“vue中作用域插槽的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    网站栏目:vue中作用域插槽的示例分析
    链接分享:http://scjbc.cn/article/piodid.html

    其他资讯