美文网首页
如何全局注册组件

如何全局注册组件

作者: plum_meizi | 来源:发表于2021-05-11 14:44 被阅读0次

    1.建一个文件global-components.ts,把需要全局使用的组件放入views/components/global文件夹

    import Vue from 'vue';
    const requireComponent = require['context'](
        // 其组件目录的相对路径
        '../views/components/global',
        // 是否查询其子目录
        true,
        // 匹配基础组件文件名的正则表达式
        /\w+\.vue$/
        // /[A-Z]\w+\.vue$/
    );
    requireComponent.keys().forEach(fileName => {
        // 获取组件配置
        const componentConfig = requireComponent(fileName);
        // 获取组件的 PascalCase 命名
        const componentName =
            fileName
                .replace(/^\.\/(.*)\.\w+$/, '$1')
                .split('/')
                .pop() || '';
        // 全局注册组件
        Vue.component(componentName, componentConfig.default);
    });
    

    2.在main.ts引入使用

    // 组件注册
    import '@/common/global-components';
    

    相关文章

      网友评论

          本文标题:如何全局注册组件

          本文链接:https://www.haomeiwen.com/subject/preadltx.html