Vue 批量註冊區域性元件及應用

筱月發表於2021-04-30
Vue元件

部落格地址：https://ainyi.com/105

批量註冊路由的有個部落格說到：https://ainyi.com/77

實際工作中，可能會遇到一個大頁面裡面有很多個模組，這些模組一般是需要拆分到單獨的元件中，然後父元件再引入

我最近就遇到一個可以拆分成 10 個模組的大表單頁面，拆分成區域性元件後還是得一個個匯入、宣告，最後在 template 應用。作為一個程式設計師，我們怎麼能寫這麼一大段重複的程式碼呢啊哈哈哈哈

所以就來搞搞區域性元件批量註冊和批量應用吧

WechatIMG29.png

如圖，一個 Index.vue 檔案中需要引入 modules 裡面 10 個子元件

註冊

先掃描讀取目錄下每個檔案，如有需要過濾的元件標出，再批量註冊

const requireComponent = require.context('./modules', false, /\w+\.(vue|js)$/)

const cmps = {}
// 這裡我把 CreateHeader 元件排除，單獨引入
const filterCmps = ['./CreateHeader.vue']

requireComponent.keys().forEach(fileName => {
  let cmp = requireComponent(fileName).default
  !filterCmps.includes(fileName) && (cmps[cmp.name] = cmp)
})
export default {
  components: {
    createHeader: () => import('./modules/CreateHeader'),
    ...cmps
  },
  data() {
    return {
      // 這裡做排序處理，按原型圖可拆分的模組順序，將每個元件的 name 命名為 xxx_${index}
      // 為什麼做排序？為了迴圈依次應用子元件
      componentList: Object.keys(cmps).sort(
        (a, b) => a.split('_')[1] - b.split('_')[1]
      )
    }
  }
}

應用

template 應用手寫每個元件也幾乎不可能了，太多了
上面 componentList 做了排序處理，按照原型圖的順序命名元件的 name: xxx_${index}
有順序了，這裡就可以使用 component、is 依次用 v-for 迴圈應用

如果每個元件的位置不是排列在一起的（中間穿插其它內容），那就單獨一個個寫吧，也不用做排序

<template>
  <div class="krry-appointment">
    <create-header :active="active" :translate="translate"></create-header>
    <div class="form-content">
      <component
        v-for="ele in componentList"
        :dataSource="dataSource"
        :key="ele"
        :is="ele"
      ></component>
    </div>
  </div>
</template>

這樣就大功告成，是不是簡化了很多程式碼~


溫馨提示：如果在上面 v-for 迴圈的 component 定義 ref，那麼此 $refs 將會是一個陣列

<component
  ref="formModules"
  v-for="ele in componentList"
  :dataSource="dataSource"
  :key="ele"
  :is="ele"
></component>

this.$refs.formModules.forEach(ele => {
  // TODO
  // 處理每個子元件(ele)
})

部落格地址：https://ainyi.com/105

相關文章