天天看點

批量注冊公共元件

需求:伴随着元件日益增加,每次使用元件都需要注冊很是繁瑣,是以批量注冊公共元件應運而生】

1.建立一個components檔案夾,把所有的公共元件放入改檔案夾下,并在該檔案夾下建立一個index.js

index.js

import header from './header'
import C1 from './C1'
import home1 from './testhome1'
import home2 from './testhome2'
import home3 from './testhome3'
import mycomponent from './mycomponent'
import testcomponent from './testcomponent'
import item from './testItem'
export default { header, C1, home1, home2, home3, mycomponent, testcomponent,item}
           

src/main.js

import components from './components/'

Object.keys(components).forEach((key)=>{
    var name=key.replace(/(\w)/,(v)=>v.toUpperCase())
    Vue.component(`v${name}`,components[key])
})
           

在元件内直接使用

<v-item class="item" :model="treeData"></v-item>
<v-testcomponent></v-testcomponent>
           

繼續閱讀