這篇文章一起來看看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中文網其他相關文章!