Eine kurze Analyse zum Verständnis von Vue-Komponenten aus einer objektorientierten Perspektive

Wenn dieselbe Funktion und derselbe HTML-Code mehrmals verwendet werden, können Sie erwägen, sie in Komponenten zu extrahieren. Der Vorteil von Komponenten besteht darin, dass Sie sie aufrufen können, wenn Sie sie verwenden möchten, und Parameter übergeben können, wenn Sie sie ändern möchten.

Was sind Komponenten

Wenn Sie Vue-Komponenten durch objektorientiertes Denken verstehen, können Sie alle Dinge in Objekte abstrahieren und Klassen oder Komponenten haben Eigenschaften und Operationen.

Wenn wir beispielsweise Menschen als Komponenten extrahieren, umfassen ihre grundlegenden Attribute Name, Alter und Nationalität; ihre grundlegenden Methoden umfassen Essen, Schlafen, Laufen usw.

<Skript>
Standard exportieren {
    Name: "Person",
    Requisiten: {
        Name: {
            Typ: Zeichenfolge,
            erforderlich: false,
            Standard: „Anonym“
        },
        Alter: {
            Typ: Nummer,
            erforderlich: false,
            Standard: 0
        },
        Land:
            Typ: Zeichenfolge,
            erforderlich: false,
            Standard: „Erdlinge“
        }
    },
    Methoden: {
        essen() {
            consloe.log('Essen')
        },
        schlafen() {
            consloe.log('Schlaf')
        },
        laufen() {
            consloe.log('läuft')
        }
    }
}
</Skript>

In der objektorientierten Programmierung können Konstruktoren globale Variablen für Klassen initialisieren, sodass dieser Ansatz auch in Komponenten verwendet werden kann.

<Person: Alter = "20": Name = "'Xiao Ming'": Land = "'Chinesisch'"></Person>

Komponenten kapseln Daten und Operationen. Was hineingeht, muss auch wieder hinaus . Was innerhalb der Komponente passiert, muss uns nicht interessieren. Wir brauchen nur die Ergebnisse und die dargestellten Effekte.

Benutzerdefinierte Ereignisse

Was soll ich tun, wenn die Außenwelt nicht direkt auf die Eigenschaften einer Komponente zugreifen kann?

Mithilfe von benutzerdefinierten $emit-Ereignissen können Sie Komponenteneigenschaften aus der Außenwelt abrufen.

<Vorlage>
    ...
    <button @click="handleClick">Klick</button>
</Vorlage>

<Skript>
Standard exportieren {
    Name: "Person",
    Methoden: {
        handleKlick() {
            dies.$emit('getPerson', {
                Alter: dieses.Alter,
                Name: dieser.Name,
                Land: dieses.Land
            })
        }
    }
}
</Skript>

Wenn die externe Komponente aufgerufen wird, fügen Sie eine benutzerdefinierte Funktion @getPerson oder v-on:click="getPerson" hinzu.

<Vorlage>
    <div>
        <Person :Alter="20" :Name="'Xiao Ming'" :Land="'Chinesisch'" @getPerson="getPerson"></Person>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Name: "Test",
    Methoden: {
        getPerson(info) {
            consloe.log(Informationen)
        }
    }
}
</Skript>

Aktuelle Fälle

Bei der Webentwicklung verwenden Sie möglicherweise Tags und denken dabei möglicherweise, dass Tags auf einer Seite nicht nur einmal, sondern mehrmals verwendet werden können. Möglicherweise möchten Sie auch einige Breiten, Höhen und Farben für unterschiedliche Situationen anpassen.

Daher können wir den mit dem Tag verbundenen HTML-Code und CSS in die Komponente einkapseln und die Parameter Breite, Höhe und Typ der Außenwelt zugänglich machen. Wenn Sie es bei der Verwendung aufgrund unterschiedlicher Situationen anpassen müssen, übergeben Sie einfach die Parameter.

<Vorlage>
    <Ansicht
        :style="{ Breite: Breite, Höhe: Höhe }"
        :Klasse="['owl-tag-' + Typ]"
        Klasse = "Owl-Tag, Text-XS, Flex, Ausrichtung zentriert, Rechtfertigung zentriert"
    >
        <Steckplatz></Steckplatz>
    </Ansicht>
</Vorlage>

<Skript>
    Name: 'Eulen-Tag',
    Requisiten: {
        // Der gültige Wert, der übergeben werden kann, ist primary | gray
        Typ: {
            Typ: Zeichenfolge,
            Standard: „primär“
        },
        Breite: {
            Typ: Zeichenfolge,
            erforderlich: false
        },
        Höhe:
            Typ: Zeichenfolge,
            erforderlich: false
        }
    }
</Skript>

<Stil>
.owl-tag {
    Rahmenradius: 8rpx;
    Polsterung: 6rpx 10rpx;
}

.owl-tag-primary {
    Farbe: weiß;
    Hintergrundfarbe: #87cefa;
}

.owl-tag-gray {
    Farbe: #81868a;
    Hintergrundfarbe: #f0f1f5;
}
</Stil>

Sobald diese Aufgaben abgeschlossen sind, wurde eine Komponente definiert. Sie können es aufrufen, wenn Sie es verwenden möchten, und Parameter übergeben, wenn Sie es ändern möchten. Das ist der Vorteil von Komponenten.

<Vorlage>
    <Eulen-Tag
        :Typ="'primär'"
        :Höhe="'45rpx'"
        :Breite="'120rpx'"
    >
        Offizieller Beitrag</owl-tag>
</Vorlage> 

Wenn Sie den Wert von type auf gray ändern, hat das folgende Auswirkungen:

Damit ist dieser Artikel zum Verständnis von Vue-Komponenten aus der Perspektive des objektorientierten Denkens abgeschlossen. Weitere relevante Inhalte zu objektorientierten Vue-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!