预览模式: 普通 | 列表

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获取数据,组织循环,甚至还要组织上滑滚动功能。
这样的组件,才称之为“灵活”!
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1322