Kilkukrotne użycie komponentu Vue - unikanie redundancji

pytanie zadane 19 września 2020 w JavaScript przez Artek Stary wyjadacz (11,800 p.)

Rozważmy następującą sytuację : Mam stronę na której używam Vue.js. Na jednej z podstron tworzę instancję Vue i wykorzystuję komponent o nazwie <navbar>. Komponent navbar wykorzystuje inny komponent o nazwie <green-button>. I teraz zauważyłem, że nawet jeżeli navbar już wykorzystuje green-button to ja i tak chcąc używać green-button w obrębie "el" muszę go i tak zaimportować ponownie. Czy to nie jest niepotrzebne powielanie? Nie dałoby się jakoś ponownie wykorzystać ten komponent zaimportowany do komponentu navbar? W swojej aplikacji używam też odrębnego modułu do tłumaczenia tekstu. Zastanawiam się jakby to zrobić aby raz wczytać moduł aby każdy komponent mógł go wykorzystywać.

1 odpowiedź

odpowiedź 19 września 2020 przez niezalogowany
wybrane 19 września 2020 przez Artek

Najlepsza

Zainportuj globalnie powtarzające się komponenty

komentarz 19 września 2020 przez Artek Stary wyjadacz (11,800 p.)

No w sumie dziwie się, że sam na to nie wpadłem :D

komentarz 19 września 2020 przez Artek Stary wyjadacz (11,800 p.)

W sumie jak tak bardziej się nad tym zastanawiam to efekt jest taki jak prosiłem jednak trzeba wszystko deklarować globalnie a niektóre komponenty mogą składać się z kilku innych i trzeba zaimportować każdy trochę to kłopotliwe.

1	komentarz 19 września 2020 przez niezalogowany Takie życie w świecie komponentów :c Jeśli jest tego sporo, można sobie dodawanie globalnych komponentów zautmatyzować

komentarz 19 września 2020 przez Artek Stary wyjadacz (11,800 p.)

Zrobiłem taki manewr.

import Vue from 'vue';
import ClickDetector from '@jscomponents/click_detector.vue';
import Navbar  from '@jscomponents/navbar.vue';
import TextInputCombo  from '@jscomponents/form_controls/text_input_combo.vue';
import Translator from '@js/modules/helpers/translator.js';
import SubmitButton from '@jscomponents/form_controls/submit_button.vue';
import IconClose from '@jscomponents/form_controls/icon_close.vue';
import PhantomButton from '@jscomponents/form_controls/phantom_button.vue';
import LabeledCheckbox from '@jscomponents/form_controls/labeled_checkbox.vue';

export default {
     build(){
        Vue.component('navbar', Navbar);
        Vue.component('click-detector', ClickDetector);
        Vue.component('text-input-combo', TextInputCombo);
        Vue.component('submit-button', SubmitButton);
        Vue.component('phantom-button', PhantomButton);
        Vue.component('labeled-checkbox', LabeledCheckbox);
        Vue.component('icon-close', IconClose);
        Vue.prototype.translator = Translator;
        return Vue;
     }
};