全局批量组件的注册和封装
1.vue2中的使用
封装custom-component/index.js
import Vue from 'vue'
const components = [
'CircleShape',
'Picture',
'VText',
'VButton',
'Group',
'RectShape',
'LineShape',
'VTable',
'VChart',
'VKeyValue',
]
components.forEach(key => {
Vue.component(key, () => import(`@/custom-component/${key}/Component`))
Vue.component(key + 'Attr', () => import(`@/custom-component/${key}/Attr`))
})
const svgs = [
'SVGStar',
'SVGTriangle',
]
svgs.forEach(key => {
Vue.component(key, () => import(`@/custom-component/svgs/${key}/Component`))
Vue.component(key + 'Attr', () => import(`@/custom-component/svgs/${key}/Attr`))
})
main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App'
import store from './store'
import router from './router'
import '@/custom-component' // 注册自定义组件
// Vue.prototype.$echarts = echarts
Vue.use(ElementUI, { size: 'small' })
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})
页面
<component :is="curComponent.component + 'Attr'" />
// curComponent.component为VKeyValue、VChart、VButton等
2.vue3中的使用
封装custom-component/index.js
main.js
页面