Vue main.js 文件中全局组件注册部分

最新推荐文章于 2025-02-25 08:55:34 发布

原创最新推荐文章于 2025-02-25 08:55:34 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何在Vue项目中批量注册多个自定义组件，并通过示例代码展示如何实现组件的导入与动态注册，提高前端开发效率。

在 \src\components\index.js 文件中export组件

import HeaderList from './HeaderList'
import HeaderMenu from './HeaderMenu'
import HeaderPatient from './HeaderPatient'
import ExitUser from './ExitUser'
import TreePanel from './VueTree'
import TreeTable from './pc/TreeTable'

import TinymceText from './Tinymce'

export default {
    HeaderList,
    HeaderMenu,
    HeaderPatient,
    ExitUser,
    TreePanel,
    TreeTable,
    TinymceText,
}

main.js中修改如下：

首字母替换成大写，加上小写字母v开头。

import components from './components/' //加载公共组件

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