批量註冊vue區域性元件

2021-09-11 13:02:48 字數 822 閱讀 2196

昨天突然收到通知,說要做乙個支付的後台管理系統,其中有一部分是要設定各種支付的配置引數,每種支付方式的配置引數都是不一樣的,所以其實是可以看成乙個個單獨的元件,然後組合成乙個頁面了。

最基礎的自然是依次匯入各個子元件,然後在 components 屬性中進行宣告,之後才能在模板中進行使用,再進行各種引數的繫結。

但是這麼做的話,毫無疑問很麻煩,而且也不利於以後的擴充套件,萬一以後支付方式變多了呢?

好在vue有乙個 component 元件,可以使用動態元件,如果使用迴圈的話,在模板中就省下了重複書寫的麻煩。 這部分的實現**為:

// msgs.js

var pays = [, , ];

var payarr = pays.map(v => v.field);

export

// setting.vue

"pay in pays"

:key="pay.title"

:title="pay.title"

:open.sync="pay.open">

"pay.field" :id="id" :obj="pay" />

複製**

現在還有個問題就是,區域性元件還是得乙個個匯入,然後乙個個宣告。作為乙個程式設計師,我們怎麼能只是複製貼上呢?(說白了其實還是我比較懶,哈哈)。這時候我想起vue的官方文件有說過基礎元件的自動化全域性註冊,仔細一看**,稍加改造不就能實現批量註冊vue區域性元件了嗎?

複製**

vue 元件 全域性註冊和區域性註冊

全域性註冊方式 註冊 vue.component component a 全域性使用。區域性註冊方式 註冊 var acomp 在例項中定義 components 全域性註冊的元件,vue 根例項 new vue 的中使用。缺點 註冊了的全域性元件,就算不需要用到,仍會占用內存在註冊之後可以用可以在...

Vue註冊區域性元件和全域性元件

1.新建components目錄,方便管理和修改 2.component資料夾下新建vueaudio元件,注意要用駝峰命名法或者短橫線命名法 export default 3.引用元件 import vueaudio from components vueaudio export default 1...

VUE註冊全域性元件和區域性元件

全域性元件 第一步 在components資料夾下建立乙個子檔案users.vue class users 第二步 在main.js中進行全域性註冊 the vue build version to load with the import command runtime only or stand...