[Vue] 那就來寫前端吧 Vue3 HOC

by Mesak

Vue3 HOC( higher order components ),原本我還不知道 HOC 的意思,主要是用了 Quasar 元件庫之後,針對原有的組件有些事件、方法想要異動,當然想操作到最少異動達到我的效果,所以搜尋了類似的關鍵字,最後才知道利用 HOC ( higher order components ) 可以達到我要的目的,HOC 在 React 已經是相當成熟的概念了,但是在 Vue 裡面實際上看到的案例相當少。

首先可以理解一下 Vuc 的 HOC 的來由,可以參考這篇:探索Vue高阶组件

我能夠快速理解的模式就是,撰寫一個 function 幫你與目標元件溝通,並且取代成原本的 component

下列這個專案:@hoc-element/table 就是一個針對 element plus 修改的例子

首先依照這篇文件:HOC in vue 3 (higher order components) 的範例可以理解,我們可以利用一個外部的 function 去設計或是引用一個 元件 components,給他不同參數做不一樣的計算,達到一樣的顯示目的。

利用 Vue 3 來撰寫 HOC 的話,要利用 Template Refs 讓中間件取代元件,並且繼承原有的事件,再額外擴充事件應用

對應的目標我放在同樣這個沙盒

這邊目標是使用 Quasar 的 QForm 來擴充一個 function ,原始 QForm 的 code 在這邊,可以看到其實內容有大部份是相同的

重點就是 HOC QForm.js 的 這段

      Object.assign(vm.proxy, {
        serialize,
        serializeWithData,
        validate: (shouldFocus) => rootRef.value.validate(shouldFocus), // validate,
        resetValidation: () => rootRef.value.resetValidation(),
        focus: () => rootRef.value.focus(),
        submit: (evt) => rootRef.value.submit(evt),
        reset: (evt) => rootRef.value.reset(evt),
        getValidationComponents: () => rootRef.value.getValidationComponents()
      })

這段替代了 原有的 QForm 裡面有的 function ,並且用相同的 submit 與 reset 相應呼叫,為的是我需要擴充 DOM 猿聲物件的 HTMLFormElement ,他沒有 serialize 的選項,之前 jQuery 用習慣 serializeArray 跟 serialize 一直都是我把 Form 重組資料送API 的好用的工具,再加上 reset 與 submit 的控制方式,可以讓原有的 click 事件真正的去觸發 submit 讓我覺得不用不行

接著又擴充一個 function

      function serializeWithData(data, keys = null) {
        let setKeys = keys === null ? Object.keys(result.value) : keys
        return _.pickBy(data, function (value, key) {
          return setKeys.indexOf(key) != -1
        })
      }

這組程式碼配合 lodash ,重新的將 input 綁定 v-model 的 data filter 過濾掉,再次組成 Object ,往後端送

唯一的缺點就是 要跟原生的 HTML 一樣,要把 input 物件與 v-model 的 data key 一樣,還要將 input 帶上 name才可以完整作動,總之算是一個擴充的應用,這個應用可以在讓你在操作其他 框架組件的時候,不用修改底層,套用你擴充的 HOC 組件可以好維護又可以快速套用內容,未來對應組件改版也可以改一個內容全部通用。

You may also like