一般的组件引入:
<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中一次全部执行了。