這篇文章一起來看看Vue中如何封裝一個自動化註冊全域元件，希望對大家有幫助！
在專案的開發過程中，我們常常會去封裝一些比較常用的全域元件, 但每增加一個元件就需要手動在main.js引入註冊，不僅麻煩還程式碼量多，著實讓人心煩。 所以乾脆封裝一個自動化註冊全域元件。 【相關推薦：《vue.js教學》】
1、自訂全域元件資料夾
在src下新建一個globalComponents，用於存放全域元件，並新建一個元件，例如Orange；
2、元件自動註冊配置檔案
在globalComponents中建立一個index.js，用來找出全部元件並自動註冊
// 自动注册全局组件，每次新增组件必须重新编译
import Vue from 'vue'
const requireComponent = require.context(
'../globalComponents', // 其组件目录的相对路径
true, // 是否查询其子目录
/\.vue$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName); // 获取组件配置
/**
* 兼容 import export 和 require module.export 两种规范
*/
// 如果这个组件选项是通过 export default 导出的,就会优先使用 .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中導入globalComponents/ index.js
// main.js import Vue from 'vue' // 自动注册全局组件 import './globalComponents/index.js'
<template>
<div class="wrapper">
<!-- 自动注册的全局组件 -->
<orange />
</div>
</template>更多程式相關知識，請造訪：程式設計入門！ ！
以上是看看Vue中如何封裝一個自動化註冊全域元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
