Vue中怎么封裝一個自動化注冊全局組件

這篇文章主要介紹“Vue中怎么封裝一個自動化注冊全局組件”，在日常操作中，相信很多人在Vue中怎么封裝一個自動化注冊全局組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中怎么封裝一個自動化注冊全局組件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

在項目的開發(fā)過程中，我們常常會去封裝一些比較常用的全局組件, 但是每添加一個組件就需要手動在main.js引入注冊，不僅麻煩還代碼量多，著實讓人心煩。 所以干脆封裝一個自動化注冊全局組件。

1、自定義全局組件文件夾

在src下新建一個globalComponents，用于存放全局組件，并新建一個組件，例如Orange；

2、組件自動注冊配置文件

在globalComponents中創(chuàng)建一個index.js，用來查找全部組件并自動注冊

// 自動注冊全局組件，每次新增組件必須重新編譯
import Vue from 'vue'

const requireComponent = require.context(
  '../globalComponents', // 其組件目錄的相對路徑
  true, // 是否查詢其子目錄
  /\.vue$/ // 匹配基礎(chǔ)組件文件名的正則表達式
)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName); // 獲取組件配置
  /**
   * 兼容 import export 和 require module.export 兩種規(guī)范
   */
  // 如果這個組件選項是通過 export default 導(dǎo)出的,就會優(yōu)先使用 .default
  const comp = componentConfig.default || componentConfig; 
  Vue.component(comp.name, comp) // 此處的name是組件屬性定義的name
})

3、編輯Orange/index.vue

組件最重要的是組件屬性定義的name（name為自動注冊的組件名）

<template>
  <div class="wrapper">
    Orange
  </div>
</template>

<script>
export default {
  name: 'Orange', // 此處的name屬性值將為后面使用的組件名 <orange />，需唯一
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

4、入口文件main.js中導(dǎo)入globalComponents/index.js

// main.js

import Vue from 'vue'
// 自動注冊全局組件
import './globalComponents/index.js'

• 基本完成以上幾步就大功告成了，后面就是可以直接使用這個全局組件了~

• 使用方法：

<template>
  <div class="wrapper">
    <!-- 自動注冊的全局組件 -->
    <orange />
  </div>
</template>

到此，關(guān)于“Vue中怎么封裝一個自動化注冊全局組件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>