vue renderless component （vue 函数式组件的理解）

[AnnVoV]

参考资料：
1.Renderless Tags Input w/Multiple Layouts
https://codepen.io/adamwathan/pen/qorebJ
2.（译）函数式组件在Vue.js中的运用
https://juejin.im/post/5c2d7030f265da613a54236f#heading-15
3.Renderless Components in Vue.js
https://adamwathan.me/renderless-components-in-vuejs/（2的原文链接）

前言

之前就看过这个概念，但是一直没有很好的能理解，并且在业务中也一直觉得使用Mixin似乎也能达到想要的效果。后来看到《函数式组件在Vue.js中的运用》这篇文章，觉得受到了一点启发。

Renderless Component 意味着什么

可复用性比较高的组件 = 展示UI + 交互行为Action + 数据 Data
尤其在前台活动中，如果有一类组件除了UI上长的不太一样，交互上有一些细微的差别，那么我们就可以往这个公式上靠。

在没理解Renderless Component之前，我们可能会把相同的方法抽出来形成mixin�, 就比如我们前台有优惠券模： A.有普通的横向展开的优惠券， B.有下方带有商品的优惠券, C.有纵向的优惠券瀑布流...那我们完全就可以去做一个Rendless Component 把具体的coupon内容插入slot中，类似下面这种样子：

<CouponWrapper>
     <section slot-scope="{couponList, grabCoupon}">
         <ul>
              <li v-for="coupon in couponList">
                     ...
               </li>
     </section>
</CouponWrapper>

完整的一个例子

可以先按照 code pen 里的这个例子（https://codepen.io/adamwathan/pen/qorebJ）写一遍，感受一下，再想怎么融入自己的业务代码里
// todo 等待补充

mixin相比于Renderless Component的缺点

1.感觉mixin最主要的痛点在于，刚接手你代码的人可能不知道你的方法哪里来的，找一圈才知道原来在mixin里
2.当有多个mixin时，不同的mixin之间要人工避免方法的重名