Регистрация VUE компонентов по всему миру - PullRequest
Новая
       17

Регистрация VUE компонентов по всему миру

0 голосов
/ 04 октября 2018

У меня есть приложение vue, которое я создал с помощью vue-cli

Я создаю некоторые компоненты, и я хочу использовать их следующим образом: 

<template>
    <oi-list>
        <oi-list-header>Task ID</oi-list-header>
        <oi-list-header>Tasks Title</oi-list-header> 
        <oi-list-header>Task Status</oi-list-header> 
        <div v-for="task in tasks">
            <oi-list-item>{{ task.id }}</oi-list-item>
            <oi-list-item>{{ task.title }}</oi-list-item>
            <oi-list-item>{{ task.status }}</oi-list-item>
        </div>
    </oi-list>
</tempalte>

Проблема, которая у меня есть, - это гдеКогда бы я ни использовал компонент списка, мне нужно написать следующее: 

<script>
    import List from '@/components/List'
    import ListHeader from '@/components/ListHeader'
    import ListItem from '@/components/ListItem'

    export default {
    name: "Tasks",
    components: {
        'oi-list': List,
        'oi-list-header': ListHeader,
        'oi-list-item': ListItem
    }
<script>

Мне бы хотелось, чтобы повторно используемые компоненты регистрировались глобально, поэтому мне не нужно импортировать их и их подкомпоненты каждый раз, когда я хочуиспользовать их, или как они динамически загружаются, когда я их использую.Возможно ли это?

Я использовал Vuetify в прошлом, и для этого не требуется импортировать каждый компонент.

Пожалуйста, кто-то может указатьменя в правильном направлении?Спасибо.

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

В качестве другого варианта, помимо ответа @ Ilyas, если вы хотите избежать глобальных переменных, это создать файл, скажем globalComponents.js со следующим содержимым: 

import List from '@/components/List.vue'
import ListHeader from '@/components/ListHeader.vue'
import ListItem from '@/components/ListItem.vue'
export default {
    'oi-list': List,
    'oi-list-header': ListHeader,
    'oi-list-item': ListItem
}

И вы можете использовать его какследует: 

<script>
    import GlobalComponents from '@/globalComponents.js'

    export default {
    name: "Tasks",
    components: {
        ...GlobalComponents
    }
<script>
0 голосов
/ 04 октября 2018

Это легко сделать.Вы можете зарегистрировать компоненты глобально в файле main.js. 

import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

Теперь вы можете использовать <my-component-name /> везде.

Более чистым способом, не раздутым main.js, является импортваш компонент в файле index.js в папке компонентов, например: 

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

Позже вы можете добавить эту строку в main.js для загрузки зарегистрированных компонентов. 

import '@/components'

документы: https://vuejs.org/v2/guide/components-registration.html

...