Vue封裝的組件全局注冊(cè)并引用
當(dāng)vue接觸的多了之后,你可能也會(huì)到自己封裝組件的程度,試想每個(gè)頁(yè)面的功能級(jí)模塊全部拆分成組件,然后后續(xù)請(qǐng)求后臺(tái)數(shù)據(jù)傳入進(jìn)去或者自己模擬數(shù)據(jù),是多么方便的一件事情。
每當(dāng)我們需要修改的時(shí)候,只需維護(hù)那一個(gè)功能性組件即可,不需要這個(gè)功能了,只需要從頁(yè)面中刪除這個(gè)組件的引用即可。
那么廢話不多說(shuō)了,我們來(lái)看看如何全局注冊(cè)并一鍵引入(類似于element ui的全部引入)。
如何封裝組件就不多贅述了。
參考vue官網(wǎng)的做法:vue官網(wǎng)全局注冊(cè)
1、正則判斷路徑以及文件名,獲取全部組件并全局注冊(cè)(可以直接在main.js里寫,但是為了規(guī)范以及后期可維護(hù)性,我們新建個(gè)單獨(dú)的的js文件寫入)
(1)main.js引入所有自定義封裝的組件
import Vue from 'vue';
import echarts from 'echarts';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element';
// 引入時(shí)間戳序列化
import './plugins/dateFormat';
// 引入公共樣式
import Public from './assets/css/public.css';
// 引入所有自定義封裝的組件
import './components/CommonCommponts/GlobalComponents';
import startup from './startup';
// 使用公共樣式
Vue.use(Public);
Vue.config.productionTip = false;
Vue.prototype.$echarts = echarts;
function vue() {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
}
startup(vue, router);
(2)全局組件的GlobalComponents.js
這里需要安裝2個(gè)插件upperFirst和camelCase
下面是組件相對(duì)于這個(gè)文件的路徑,因?yàn)槲业姆庋b組件和這個(gè)js文件在同一級(jí),所以直接 . 就可以了。
然后是是否查詢子目錄,即這個(gè)路徑下你又新建了文件夾,把各個(gè)組件區(qū)分開,那么就會(huì)嵌套很多層,查詢子目錄可以方便的使我們找到它們。
然后是正則表達(dá)式,因?yàn)槲业乃薪M件名都是Rdapp開頭的,這里看大家的文件命名,不需要的話刪除前面的Rdapp即可。
然后下面的部分就可以不用動(dòng)了。
import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
const requireComponent = require.context(
// 其組件目錄的相對(duì)路徑
'.',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/Rdapp[A-Z]\w+\.(vue|js)$/,
);
requireComponent.keys().forEach((fileName) => {
// 獲取組件配置
const componentConfig = requireComponent(fileName);
// 獲取組件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 獲取和目錄深度無(wú)關(guān)的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, ''),
),
);
// 全局注冊(cè)組件
Vue.component(
componentName,
// 如果這個(gè)組件選項(xiàng)是通過(guò) `export default` 導(dǎo)出的,
// 那么就會(huì)優(yōu)先使用 `.default`,
// 否則回退到使用模塊的根。
componentConfig.default || componentConfig,
);
});
2、組件封裝以及命名
這里新建了一個(gè)文件夾,其中js文件是上面的配置文件,用于全局注冊(cè)并引用的,然后下面是封裝的組件,請(qǐng)使用駝峰命名法。

3、組件引入
組件引入使用 - 語(yǔ)法,以每個(gè)駝峰為標(biāo)記,例如AccBdd的命名,引入就是<acc-bdd></acc-bdd>即可
<template>
<div class="ER-left-box">
<rdapp-animation-group animationType="leftToRight">
<!-- 標(biāo)題一 -->
<rdapp-animation-item speed="fast">
<rdapp-title
:textStyle="leftData.LeftTitle1"
class="header-title"
></rdapp-title>
</rdapp-animation-item>
<!-- 火災(zāi)警告 -->
<rdapp-animation-item speed="slow">
<rdapp-early-warning :textStyle="HandleEventInfo"></rdapp-early-warning>
</rdapp-animation-item>
<!-- 標(biāo)題二 -->
<rdapp-animation-item speed="fast">
<rdapp-title
:textStyle="leftData.LeftTitle2"
class="header-title"
></rdapp-title>
</rdapp-animation-item>
<!-- 描述 -->
<rdapp-animation-item speed="normal">
<rdapp-describe
:textStyle="{ description: HandleEventInfo.description }"
></rdapp-describe>
</rdapp-animation-item>
<!-- 視頻 -->
<rdapp-animation-item speed="slow">
<rdapp-video ref="video" :cameraNum="0"></rdapp-video>
</rdapp-animation-item>
</rdapp-animation-group>
</div>
</template>
這樣我們就完成了組件的封裝以及所有組件的全局注冊(cè)和使用,便于我們的開發(fā)以及后期可維護(hù)性。
這里附帶一個(gè)組件的封裝寫法:
這里封裝的是一個(gè)標(biāo)題的組件,為了方便用戶傳參,使用了對(duì)象作為參數(shù),通過(guò)計(jì)算屬性以及Object.assign方法,可以更方便的合并用戶傳遞的參數(shù),即如果用戶只在對(duì)象中傳入了text屬性,那么其他屬性就會(huì)使用默認(rèn)值,這樣無(wú)疑提高了組件的豐富性。
<template>
<div class="BgTitle-box" :style="getStyle">
{{getStyle.text}}
</div>
</template>
<script>
export default {
name: 'RdappBgTitle',
props: {
textStyle: Object,
},
computed: {
getStyle() {
return Object.assign({
text: '基本信息',
width: '300px',
height: '54px',
lineHeight: '54px',
textAlign: 'center',
fontSize: '16px',
fontColor: '#fff',
}, this.textStyle);
},
},
};
</script>
<style scoped>
.BgTitle-box{
background: url("../../static/img/PreliminaryJudge/assess.png") no-repeat center center;
}
</style>
好了,以上就是組件封裝以及全局注冊(cè)引用的方法,希望對(duì)你有幫助。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jenkins?Sidebar?Link插件實(shí)現(xiàn)添加側(cè)邊欄功能詳解
這篇文章主要介紹了vue框架實(shí)現(xiàn)添加側(cè)邊欄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式
我們經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue實(shí)現(xiàn)折線圖 可按時(shí)間查詢
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線圖,可按時(shí)間查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08

