So komponieren Sie den gemeinsamen Header der Seite in Vue (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Methode zur Komponentisierung des gemeinsamen Headers der Seite vorgestellt. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Dieser Artikel stellt die Methode zur Komponentisierung des gemeinsamen Headers der Seite vor und teilt sie mit allen:

Äh. . Nehmen Sie es wieder auf und verwenden Sie vue-cli, um schnell Projekte zu generieren.

Ich habe zuvor eine mehrseitige Transformation durchgeführt und die UI-Komponente von Vux eingeführt. Lassen Sie uns dieses Mal basierend auf diesem Projekt über Komponenten in Vue sprechen.

Fragen Sie mich nicht, warum ich immer Blogs über Vue schreibe, es dient nur dem Lebensunterhalt (………………)

Dies ist die offizielle Dokumentadresse (https://cn. vuejs.org/v2/guide/components.html#Was ist eine Komponente?), ich habe viel über Komponenten geschrieben, und Sie werden wissen, dass dies sehr nützlich ist.

Ich werde die Konzepte einiger Komponenten nicht einzeln vorstellen. Die offiziellen Dokumente sind sehr detailliert.

Kommen wir zur Sache und laden das Projekt direkt herunter

Nehmen Sie das vorherige Projekt heraus

Zwei Unter dieser Anforderung ist es selbstverständlich, unsere Komponenten zu verwenden und den folgenden Code zu index.js hinzuzufügen.

Vue.component('header-item', {
 props: ['message', 'backUrl'],
 template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont"></i></span></router-link> <p><span>{{message}}</span></p> </header>`
})
// props用来传递数据
//template 一个html结构的模板

Es ist zu beachten, dass der backUrl-Parameter eine konfigurierbare Route ist, da im vorherigen Projekt Vue-Routing verwendet wurde und entsprechend Ihren eigenen Anforderungen in tatsächlichen Projekten konfiguriert werden kann.

Drei Fügen Sie Code zu den anderen beiden Demoseiten hinzu

Fügen Sie den folgenden Code zu demo1.vue hinzu

<header-item message="我是demo1头部" backUrl="/"></header-item>

Fügen Sie den folgenden Code zu demo2.vue hinzu

<header-item message="我是demo2头部" backUrl="/"></header-item>

Viertens: Führen Sie schließlich die Webseite aus und öffnen Sie sie. Sie können sehen

Fahren Sie mit dem Hochladen der vorherigen Github-Adresse fort Projekt https://github.com /qianyinghuanmie/vue-cli-

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie man Bilder in JavaScript vergrößert

Wie man China in vue+vuex+axios+echarts zum Leben erweckt Karte

So wechseln Sie zwischen Stilen in Vue

Lösen Sie das Problem, dass das Eingabefeld durch die Eingabemethode blockiert wird

So lösen Sie das Problem, dass die Softtastatur das Eingabefeld in js blockiert

So implementieren Sie die Komponenteninteraktion in Angular2

Das obige ist der detaillierte Inhalt vonSo komponieren Sie den gemeinsamen Header der Seite in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!