javascript - 怎么使用其它人写好的vue组件比较好?

 璨然2502869273 发布于 2022-11-27 15:13

这个库不错:
http://yuche.github.io/vue-strap

里面有很多组件
我要是想把所有组件都给注册了,有什么好办法吗?

我现在是这么用的,很麻烦:

在main.vue中,一个一个的注册:

import {alert} from 'vue-strap';
Vue.component('alert', alert);

然后在自己的其它vue组件中,直接使用

但是这样好麻烦啊,有什么好办法吗?

3 个回答
  • import vux from 'vux-components/index.js'
    
    export default {
        components: vux
    }
    2022-11-27 15:32 回答
  • 更新:更建议使用 @JustGo 的姿势,按需加载;牺牲掉编码上的方便性,带来的是代码的可控、恰到好处。


    由于 vue 并没有提供批量注册的接口,所以要借助循环什么的:

    import * as strap from 'vue-strap'
    
    for (let name in strap) {
        if (name != 'default' && strap.hasOwnProperty(name)) {
            Vue.component(
                'my-' + name.replace(/[A-Z]/g, function(char) {
                    return '-' + char.toLowerCase();
                }),
                strap[name]
            );
        }
    }

    上面的代码将会把 vue-strap 注册为类似:

    my-alert
    my-carousel
    my-slider
    my-accordion
    my-affix
    my-aside
    my-checkbox-btn
    my-checkbox-group
    my-datepicker
    my-dropdown
    my-modal
    my-option
    my-panel
    my-popover
    my-progressbar
    my-radio-group
    my-radio-btn
    my-select
    my-tab
    my-tabset
    my-tooltip
    my-typeahead
    my-navbar
    my-spinner

    的名称。

    为什么要加 my- 。。。因为其中的 optionselect 之类的,vue 不允许注册和原生组件重名的组件名。

    至于 my- 嘛 。。。可以改成你的项目名称什么的,算是命名空间的意思吧。

    2022-11-27 15:32 回答
  • 除了一些会多处用到的组件,如:弹窗、提示这种,适合全局注册,一般情况下还是按需引用,划分组件本来就是为了体现分治

    一般的使用案例是这样的:

    import {tab, panel} from 'vue-strap';
    
    export default {
        components: {
            tab,
            panel
        },
        // ...
    }
    2022-11-27 15:32 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有