[04] Renderless Component


Posted by m6fish on 2021-06-10

Photo by Ruben Rodriguez on Unsplash

前言

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

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

主題

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
    })
}

總結

覺得 renderless 真的很方便,而且就算日後'不小心'需要html的區塊時,也可以很快地調整。缺點大概是閱讀上比較不直觀,需要追一下裡頭子組件發生什麼事。


#Vue #vue-pattern







Related Posts

JS的同步非同步與Event Loop

JS的同步非同步與Event Loop

【Day03】列表渲染 & 表單綁定

【Day03】列表渲染 & 表單綁定

ASP.NET Core Web API 入門教學 - 序

ASP.NET Core Web API 入門教學 - 序


Comments