Photo by Ruben Rodriguez on Unsplash

前言

Renderless Component 是一個很強力的整理工具！能夠把過多&雜亂的商業邏輯集中拉出來管理，而又不影響原本的版面顯示。而這個模式的本質是使用render function 來渲染出畫面，搭配使用 v-slot 或 renderPros 來帶入需要的資料，建議可以跟 v-slot / renderPros 的章節一起學習，並且比較使用模式的不同。

注: 這篇範例使用的是 v-slot 的方式傳遞資料

主題

vuePattern #renderless-component
範例程式
專案路徑: views/renderless

Renderless Component 是一種沒有 template 區域的 Component (剩下 js, css )，而完全只有js的狀況下，還可以檔名直接改為.js(取代.vue)，猜測這樣的更動應該能使之被解析得更快。

以現實的例子來說，可以應用在: 外表顯示樣式不同，但功能類似 之元素上(e.g. tag按鈕、商業邏輯按鈕、報表...)

有趣的對比

Renderless Component -> 沒有 html
functional Component -> 沒有 js

父組件負責提供介面設計，以及運算原資料

// index.vue 父組件
<!-- Senior -->
<calculator v-slot="{salary, tax, level}" v-bind="{isJunior: false, base: +base, bonus: +bonus}">
    <div>
        <div>Senior</div>
        <span>salary: {{salary}}</span> /
        <span>tax: {{tax}}</span> /
        <span>level: {{level}}</span>
    </div>
</calculator>

子組件負責運算，並把結果藉由 $scopedSlots 丟回去給父組件

// calculator.vue 子組件
render () {
    return this.$scopedSlots.default({
        salary: this.salary,
        tax: this.tax,
        level: this.level
    })
}