vue.use方法与组件注册的理解

一般的组件引入：

<template>
  <div class="answer-wrapper">
    <BVnav />
    <BVtabs/>
  </div>
</template>

<script>
import BVtabs from "@components/tabs/Index";
import BVnav from "@components/nav/Index";
export default {
    
    
  components: {
    
    
    BVtabs,
    BVnav
  }
};
</script>

需要引入组件、注册组件后才能使用。
而lement-ui的el-button这种组件是如何做到全局使用的呢？

这就需要提到Vue.use();方法。
vue.use会去找引入组件的install方法，将组件全局注册

例如main.js中 import element from './utils/element'; Vue.use(element);
utils/element.js如下：

import {
    
    
    Button,
    Table,
    TableColumn,
    Select,
    Option,
    Input,
    Message,
    MessageBox,
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem,
    Dropdown,
    Switch,
    Header,
    Pagination,
    DropdownMenu,
    DropdownItem,
    Container,
    Card,
    Main,
    Aside,
    Breadcrumb,
    BreadcrumbItem,
    DatePicker,
    Radio,
    RadioGroup,
    Tag,
    Dialog,
    Checkbox,
    CheckboxGroup,
    CheckboxButton,
    Tabs,
    TabPane,
    Upload,
    Badge,
    Cascader,
    Carousel,
    CarouselItem,
    Loading,
    Tooltip
} from 'element-ui';

const element = {
    
    
    install : (Vue) => {
    
    
        Vue.use(Button),
        Vue.use(Table),
        Vue.use(TableColumn),
        Vue.use(Select),
        Vue.use(Option),
        Vue.use(Menu),
        Vue.use(MenuItem),
        Vue.use(MenuItemGroup),
        Vue.use(Submenu),
        Vue.use(Input),
        Vue.use(Header);
        Vue.use(Switch),
        Vue.use(Pagination),
        Vue.use(Main);
        Vue.use(Card);
        Vue.use(Dropdown),
        Vue.use(DropdownMenu),
        Vue.use(DropdownItem),
        Vue.use(Breadcrumb),
        Vue.use(BreadcrumbItem),
        Vue.use(Radio),
        Vue.use(Aside);
        Vue.use(DatePicker),
        Vue.use(RadioGroup),
        Vue.use(Tag),
        Vue.use(Dialog),
        Vue.use(Checkbox),
        Vue.use(CheckboxGroup),
        Vue.use(CheckboxButton),
        Vue.use(Tabs),
        Vue.use(TabPane),
        Vue.use(Upload),
        Vue.use(Container);
        Vue.use(Badge),
        Vue.use(Cascader),
        Vue.use(Carousel),
        Vue.use(CarouselItem),
        Vue.use(Loading),
        Vue.use(Tooltip),
        Vue.prototype.$message = Message;
        Vue.prototype.$alert = MessageBox.alert;
        Vue.prototype.$confirm = MessageBox.confirm;
    }
};

import '@styles/ele-variables.scss';

export default element;

相当于把vue文件中引入子组件注册后使用过程中的引入注册拉到了底层 在install中一次全部执行了。