vue“作用域插槽”来制作通用列表组件

 “作用域插槽”的官方定义是:作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。这VUE2.5提供的新功能,经我亲自测试,在2.2版本中并不好用。建议直接升到2.5。

官网文档地址:https://cn.vuejs.org/v2/guide/components.html#作用域插槽

典型运用就是列表。比如,在项目中有几种列表,他们除了item的格式不同,其它逻辑都类似,比如有类似的数据读取方式,有相同的页码逻辑,是否能写一个通用的组件,来加载这些列表,而不是写成多个列表组件?用作用域插槽实现如下。
 
父页面:
<infi data="/daily_work" class="infi1">
        <li slot="item" slot-scope="props">
               <span>{{ props.cont.pid }}</span>
               <span>{{ props.cont.tit }}</span>
        </li>
</infi>
props仅为一个变量,用来接收子组件传递过来的参数。
 
组件模板这样写:
<ul class="list">
        <slot v-for="(item,index) in list"
        name="item"
        :cont="item">
        </slot>
    </ul>
这样,把父组件中的一个<li>做为slot插槽放入子组件中,子组件的结构实际是由插槽提供的。
而子组件则负责列表的公有行为,比如<ul>“外壳”,用ajax获取数据,组织循环,甚至还要组织上滑滚动功能。
这样的组件,才称之为“灵活”!


[本日志由 admin 于 2017-12-13 10:49 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 1996
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭