Понимание метода 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>

Его можно использовать только после внесения и регистрации компонентов.
И как глобально использовать компонент el-button element-ui?

Это требует Vue.use();методов.
vue.use найдет метод установки импортированного компонента и зарегистрирует компонент глобально.

import element from './utils/element'; Vue.use(element);
Например, utils/element.js в main.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 на нижний уровень и выполнению всего сразу при установке.

Je suppose que tu aimes

Origine blog.csdn.net/Beatingworldline/article/details/122957184
conseillé
Classement