Vue 批量註冊局部組件及應用

• 2021 年 4 月 30 日
• 筆記

博客地址：//ainyi.com/105

批量註冊路由的有個博客說到：//ainyi.com/77

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

我最近就遇到一個可以拆分成 10 個模塊的大表單頁面，拆分成局部組件後還是得一個個導入、聲明，最後在 template 應用。作為一個程序員，我們怎麼能寫這麼一大段重複的代碼呢啊哈哈哈哈

所以就來搞搞局部組件批量註冊和批量應用吧

如圖，一個 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" :key="ele" :is="ele"></component>
    </div>
  </div>
</template>

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

博客地址：//ainyi.com/105