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

典型运用就是列表。比如,在项目中有几种列表,他们除了item的格式不同,其它逻辑都类似,比如有类似的数据读取方式,有相同的页码逻辑,是否能写一个通用的组件,来加载这些列表,而不是写成多个列表组件?用作用域插槽实现如下。

props仅为一个变量,用来接收子组件传递过来的参数。

这样,把父组件中的一个做为slot插槽放入子组件中,子组件的结构实际是由插槽提供的。

而子组件则负责列表的公有行为,比如“外壳”,用ajax获取数据,组织循环,甚至还要组织上滑滚动功能。