上一篇
下一篇
vue“作用域插槽”来制作通用列表组件
作者:admin 日期:2017-12-13
“作用域插槽”的官方定义是：作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。这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获取数据，组织循环，甚至还要组织上滑滚动功能。
这样的组件，才称之为“灵活”！
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 6940
发表评论
