使用Vant UI库如何注册组件

Vant UI库由于其操作简单，使用快捷的特性受到许多前端开发者的喜爱，特别是在很多电商项目中都把Vant UI库作为首选UI库。
许多新手在初次接触Vant UI库时，可能也和笔者一样遇到过不知道如何注册引入的组件的情况。
后来在查看很多案例之后，发现正确写法应该是

import { Toast } from 'vant';

export default {
    name: 'DetailGoodsAction',
    components: {
        [Toast.name]: Toast,
    },
}
</script>

使用的是[Toast.name]: Toast,这种不太常见的组件注册格式 查找了一下Vant UI库的源代码，找到如下代码供大家对Vant库组件注册方式进行理解

// vant/utils/create/index.js
import { createBEM } from './bem';
import { createComponent } from './component';
import { createI18N } from './i18n';
export function createNamespace(name) {
  name = 'van-' + name;
  return [createComponent(name), createBEM(name), createI18N(name)];
}

/**
 * Create a basic component with common options
 */
import '../../locale';
import { isFunction } from '..';
import { camelize } from '../format/string';
import { SlotsMixin } from '../../mixins/slots';
import Vue from 'vue';

function install(Vue) {
  var name = this.name;
  Vue.component(name, this);
  Vue.component(camelize("-" + name), this);
} // unify slots & scopedSlots