Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen

Der heutige Artikel wird Ihnen dabei helfen, Requisiten gründlich kennenzulernen …

Props werden hauptsächlich verwendet, um Werte an Komponenten zu übergeben. Ihre Aufgabe besteht darin, Daten von außen zu empfangen. Es ist ein Konfigurationselement auf derselben Ebene wie Daten, el und ref.

Frage 1: Wie werden Requisiten konkret eingesetzt? Was ist das Prinzip? Blick nach unten

1. [Definieren Sie die aufgerufene Komponente] Zuerst definieren wir eine Personenkomponente, die zur Anzeige persönlicher Informationen verwendet wird. Wir geben den Namen, das Geschlecht und das Alter einer Person ein. Nachdem wir diese Komponente definiert haben, können wir warten, bis andere Komponenten sie aufrufen. Damit andere Komponenten es nun aufrufen können, müssen wir ein Props-Attribut definieren, um die von anderen Komponenten übergebenen Werte zu empfangen.

Hinweis: Name, Geschlecht und Alter in der Komponente sind alle ein Prop. Die Kombination der drei Eigenschaften ergibt Props. Dies ist der Ursprung von Props. Es ist die Pluralform von Prop und stellt eine Sammlung mehrerer Prop-Attribute dar.

2. [Aufrufkomponente] An dieser Stelle definieren wir eine weitere Infokomponente, um die grundlegenden Informationen der Person anzuzeigen, und rufen die Personenkomponente auf, um die Informationen anzuzeigen. Der Aufruf ist in vier Schritte unterteilt, wie in der folgenden Abbildung dargestellt. Und übergeben Sie Parameter

3. [Siehe Effekt] Die Daten wurden erfolgreich übertragen.

Frage 2: Was ist, wenn wir dem Alter ein Jahr hinzufügen möchten? Wie können wir das tun?

Wir könnten einfach 1 wie dieses hinzufügen

Mal sehen, ob der Effekt erzielt werden kann. Es wird 19. Wie in der folgenden Abbildung gezeigt, ist es offensichtlich falsch. Da das von Ihnen eingegebene Alter die Zeichenfolge 18 ist, wird das Hinzufügen von 1 erst nach 18 verkettet.

Dann fragten einige Leute: Wie übermitteln wir Zahlen? Es ist ganz einfach, nur ein Symbol.

Wir müssen nur einen Doppelpunkt vor dem Alter hinzufügen : es wird nur der Inhalt innerhalb der Anführungszeichen 18 erkannt, andernfalls werden die Anführungszeichen 18 erkannt

Schauen Sie sich die Wirkung an, sie ist jetzt erfolgreich.

Frage 3: Welche Art von Daten möchten wir für den Alterstyp am liebsten erhalten?

Es muss ein numerischer Typ sein, aber wenn jemand darauf besteht, einen Zeichenfolgentyp zu übergeben, wirkt sich dies auf unsere Altersberechnung aus, z. B. wenn oben 1 hinzugefügt wird ... Wie begrenzen wir also den Typ?

Derzeit können Props nicht mehr mit [], sondern mit {} definiert werden, da Props bei der Einschränkung des Typs als Objekt verwendet werden.

Nachfolgend schränken wir die drei Attribute separat ein.

Welche Änderungen treten auf, nachdem wir das Alter auf den Zahlentyp beschränkt und dann die Zeichenfolge 18 übergeben?

Zu diesem Zeitpunkt meldet die Konsole einen Fehler, der darauf hinweist, dass der Datentyp des Alters nicht übereinstimmt.

Obwohl die Anzeige dadurch nicht beeinträchtigt wird, wird ein Fehler gemeldet. Dies kann uns einen klaren Hinweis geben. Für uns ist es praktisch, die eingehenden Daten zu standardisieren.

Frage 4: Wenn wir den Typ einschränken können, können wir dann auch einschränken, ob er übertragen werden muss?

A: Natürlich.

Gehen Sie dabei davon aus, dass der Name zwingend übermittelt werden muss, die übrigen Angaben jedoch nicht erforderlich sind.

Typattribut: Typ:xx

Erforderliche Attribute: erforderlich: true

Standardeigenschaften: Standard: xx

Der Name muss angegeben werden. Versuchen wir es also ohne. Wenn kein Alter angegeben wird, wird davon ausgegangen, dass es 18 Jahre alt ist.

Als Ergebnis meldet die Konsole auch einen Fehler und weist darauf hin, dass der Name ein erforderliches Attribut ist. Wir haben das Alter nicht überschritten und der Standardwert wurde erfolgreich angezeigt. 19 liegt daran, dass das Alter zu Beginn um 1 erhöht wurde, sodass wir das Attribut erfolgreich eingeschränkt haben.

Um das oben Gesagte zusammenzufassen:

Beim Empfangen von Daten schränkt Props auch den Datentyp ein, gibt den Standardwert an und schränkt die Notwendigkeit ein.

Frage 5: Können die von Props empfangenen Eigenschaftswerte geändert werden?

A: Nein

Wir fügen einen Button und ein Klickereignis hinzu

Hinweis: Wir müssen auf die Eigenschaftswerte in den Requisiten zugreifen, die hierüber gefunden werden können.

Überprüfen Sie die Ergebnisse und stellen Sie fest, dass die Seite angezeigt werden kann, die Konsole jedoch einen Fehler meldet und daher nicht geändert werden kann

Frage 6: Was muss ich tun, wenn ich den Wert des Props-Attributs ändern muss?

Antwort: Indirekt über Daten ändern

Wir definieren eine Variable in Daten neu, um das Props-Attribut zu erhalten. Es ist am besten, wenn diese Variable nicht denselben Namen hat. Wenn sie denselben Namen hat, wird der Wert des Attributs „props“ zuerst abgerufen, mit der Priorität „props>data“ . Wenn wir dann Werte in HTML betreiben oder binden, betreiben wir die neu definierten Variablen in Daten

An dieser Stelle können Sie sehen, dass die Änderung erfolgreich war und keine Fehler gemeldet wurden:

Zusammenfassung: Konfigurationselementeigenschaften

-------Lassen Sie die Komponente Daten von außen empfangen

Es gibt drei Möglichkeiten, Daten zu empfangen:

(1) Nur empfangen: Requisiten: ['Name', 'Alter', 'Geschlecht']

(2) Empfangen und Einschränken von Typen: props: { "name": Number }

(3) Geben Sie die Standardwerte für Einschränkungsart und Einschränkungsnotwendigkeit an:

    Requisiten:{
        "Name":{
            Typ: Zeichenfolge,
            erforderlich: wahr
        },
        "Alter":{
            Typ: Nummer,
            Standard: 18
        },
        "Sex":{
            Typ: Zeichenfolge,
            Standard: „männlich“
        },
    },

Hinweis: Props ist schreibgeschützt. Das zugrunde liegende Vue erkennt Ihre Änderungen an Props. Wenn Sie Änderungen vornehmen, meldet die Konsole einen Fehler. Wenn Sie Änderungen vornehmen müssen, kopieren Sie eine Kopie in die Daten und ändern Sie die Daten über die Daten.

Dies ist das Ende dieses Artikels über das Props-Attribut von Vue-Komponenten. Weitere Informationen zum Props-Attribut von Vue-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!