web-dev-qa-db-fra.com

Enregistrement des composants vue globalement

J'ai une application vue que j'ai créée en utilisant la vue-cli

Je crée des composants et je veux les utiliser comme ceci:

<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>

Le problème que j'ai est où que j'utilise le composant liste, je dois écrire ce qui suit:

<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>

Ce que je voudrais, c'est que les composants réutilisables soient enregistrés globalement, donc je n'ai pas à les importer et leurs sous-composants chaque fois que je veux les utiliser, ou certains comment les charger dynamiquement lorsque je les utilise. Est-ce possible?

J'ai utilisé Vuetify dans le passé et cela ne vous oblige pas à importer chaque composant pour l'utiliser.

S'il vous plaît quelqu'un peut-il m'orienter dans la bonne direction? Merci.

javascriptvuejs2vue-component
13
Brad

Une autre option, en plus de la réponse de @ Ilyas, si vous voulez éviter les globaux, est de créer un fichier, dites globalComponents.js avec le contenu suivant:

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
}

Et vous pouvez l'utiliser comme suit:

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

    export default {
    name: "Tasks",
    components: {
        ...GlobalComponents
    }
<script>
7
Ayush Gupta

C'est facile à réaliser. Vous pouvez enregistrer des composants globalement dans le fichier main.js.

import MyComponent from '@/components/MyComponent'

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

Vous pouvez maintenant utiliser <my-component-name /> partout.

Une manière plus propre, sans gonfler votre main.js, consiste à importer votre composant dans un fichier index.js dans votre dossier de composants comme celui-ci.

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

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

Plus tard, vous pourrez ajouter cette ligne à votre main.js pour charger les composants enregistrés.

import '@/components'

les documents: https://vuejs.org/v2/guide/components-registration.html

23
Odyssee