首页 > 怎么使用其它人写好的vue组件比较好?

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

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

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

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

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

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

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

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


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

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

import {tab, panel} from 'vue-strap';

export default {
    components: {
        tab,
        panel
    },
    // ...
}

更新:更建议使用 @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- 嘛 。。。可以改成你的项目名称什么的,算是命名空间的意思吧。


import vux from 'vux-components/index.js'

export default {
    components: vux
}
【热门文章】
【热门文章】