Navigationsleiste mit Vue.js
Ich arbeite derzeit an einem Projekt in Vue.js und dies ist meine erste Zeit mit einer vollständigen Umgebung mit Webpack, Vue.js, Babel, und so weiter.
In früheren Projekten, mit einem navigation bar war ziemlich straight-forward. Fügen Sie einfach den HTML-Struktur, hard-code die links und das ist es, die navigation bar ist fertig. Jetzt mit Vue.js ich denke, dass dies zerstören würde, das Gefühl der Komponenten. Ich habe eine <nav-bar>-Komponente und mehreren <nav-bar-item>-Komponenten. Dies funktioniert gut, die navigation bar wird angezeigt und enthält die Elemente.
Nun auf das eigentliche problem: Wo bekomme ich jetzt meine links und Texte für diese Elemente? Meine Vermutung war, steckte Sie in den <nav-bar>-Komponente, aber der text wiedergegeben wird, indem die <nav-bar-item>-Komponente, so müsste ich an hand der Daten über. Setzen Sie Sie direkt in die <nav-bar-item>-Komponente wird nicht funktionieren, weil der Punkt bedeutet "nicht wissen", was es ist in der gesamten Website.
Was wäre die best practice hier? Hand der Daten über? Erstellen Sie eine Globale Konfiguration?
Dank!
- Baust du SPA-oder multi-page-app ?
- Ich bin Bau einer multi-page-app, aber ich bin mit vue-router zu tun. Also im Grunde, es ist ein SPA, aber es macht eine Menge verschiedener Ansichten.
- Und diese Ansichten sind im Grunde Vue Komponenten, und Sie legte die Ihnen für den jeweiligen Pfad in den router-Einstellungen ?
- Genau. Ich will jetzt wissen, wo die Daten gespeichert werden für links, Bilder, etc in den verschachtelten Komponenten.
- Ich Frage mich, warum haben Sie <nav-bar-item> - Komponente, macht es Rendern als link am Ende ? Warum Sie einfach nicht gehen mit
<router-link>? btw können Sie definieren, Daten in der parent-Komponente, in deinem Fall <nav-bar> und dann senden Sie die Daten, die Sie benötigen, um die Kind-Komponente, über Requisiten. - Ich bin mit dem <nav-bar-item>, denn es enthält ein Listenelement, das hält einem Symbol und dem eigentlichen link. Ich dachte, es könnte sein modularer und besser, es zu tun wie diese.
- Hm die Sache, die Sie tun können, ist zu definieren, alle nav-Elemente in Daten-Objekt auf
<nav-bar>Komponente.Dann können Sie Durchlaufen diese Daten, und senden Sie Requisiten für jede<nav-bar-item>dann haben Sie Daten, die Sie brauchen, in<nav-bar-item>Komponente.Hoffe, du hast es 🙂 - Eigentlich habe ich es nicht bekommen. Also zu aller erst, Sie raten mir zum speichern der links innerhalb des <nav-bar "> " -Komponente. Ich glaube, ich habe, die. Aber wie würde ich von hand die Daten auf die <nav-bar-item>-Komponenten? Ich lese das Wort "Requisiten". Ich werde geben, dass eine Suche.
- Okay, ich fand die Dokumentation Teil über, und es scheint, wie ich habe völlig verpasst, während meiner Suche, keine Ahnung wie. Es funktioniert jetzt. Danke für Eure Hilfe. Wenn Sie möchten, können Sie eine vollständige Antwort, und ich werde markieren Sie es als akzeptiert.
- Coole froh, dass Sie es bekam.Requisiten sind ziemlich nützliche Sache, wenn Sie arbeiten mit Komponenten - Sie helfen könnten, eine Menge, wenn man zur Kommunikation mit untergeordneten Komponenten.
- kann man teilen, den link den du gefunden? Das finden der richtigen Dokumentation kann sehr hart sein!
- Es ist der link Belmin teilte in seiner Antwort weiter unten 🙂 Wenn du Hilfe benötigst, lass es mich wissen!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Sache, die Sie tun können, ist zu definieren, die anfänglichen Daten in übergeordneten Komponente, das wäre store info über nav bar Elemente.Dann kann man Durchlaufen Sie ein und schicken Sie die Daten für jedes Element mit Hilfe der Requisiten https://vuejs.org/v2/guide/components.html#Props