Wie empfängt die Vue-Komponente den von anderen übergebenen Wert?

Vue ist ein sehr leistungsfähiges JavaScript-Framework, das ein einfach zu verstehendes und zu verwendendes Komponentensystem bietet, das uns dabei helfen kann, die Webentwicklung besser durchzuführen.

In Vue kann eine Komponente als unabhängiges, wiederverwendbares Modul geschrieben werden. Bei der Entwicklung tatsächlicher Projekte ist es jedoch wahrscheinlich, dass Daten zwischen mehreren Komponenten übertragen werden müssen. In diesem Fall müssen Daten zwischen Vue-Komponenten übertragen werden.

In Vue kann die Datenübertragung zwischen Komponenten durch Requisitenattribute erreicht werden. Das props-Attribut ermöglicht es übergeordneten Komponenten, Daten an untergeordnete Komponenten zur Verwendung in ihren eigenen Vorlagen zu übergeben.

Wenn wir Daten an eine Unterkomponente übergeben müssen, müssen wir zunächst ein Props-Attribut in der Unterkomponente definieren, wie unten gezeigt:

Vue.component('child-component', {
    props: ['msg'],
    template: '<div>{{msg}}</div>',
});

Hier definieren wir eine untergeordnete Komponente untergeordnete Komponente, die über ein Props-Attribut namens msg verfügt. Zu diesem Zeitpunkt kann die übergeordnete Komponente ein Feld mit dem Namen msg an die untergeordnete Komponente übergeben, wie unten gezeigt:

<child-component msg="Hello World!"></child-component>

Über dieses Props-Attribut kann die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Daten empfangen und verwenden es wird eigenständig in der Vorlage verwendet.

In der untergeordneten Komponente können wir die von der übergeordneten Komponente übergebenen Daten über {{msg}} ausgeben.

Darüber hinaus gibt es eine weitere Möglichkeit, Daten an Unterkomponenten zu übergeben, und zwar die Verwendung der v-bind-Direktive. Die v-bind-Direktive kann eine Eigenschaft dynamisch an einen Ausdruck binden, wie unten gezeigt:

Vue.component('child-component', {
    props: ['msg'],
    template: '<div v-bind:title="msg">{{msg}}</div>',
});

Hier definieren wir eine untergeordnete Komponente untergeordnete Komponente, die ein Props-Attribut namens msg hat. In der Vorlage der Unterkomponente verwenden wir die v-bind-Direktive, um das msg-Attribut an das Titelattribut zu binden, sodass das Titelattribut der Unterkomponente dynamisch geändert werden kann.

In der übergeordneten Komponente können wir Daten über die v-bind-Direktive an eine Eigenschaft binden, wie unten gezeigt:

<child-component v-bind:msg="message"></child-component>

Mit dieser v-bind-Direktive binden wir das Nachrichtenfeld des Datenattributs in der übergeordneten Komponente in das msg-Attribut der untergeordneten Komponente.

Kurz gesagt, es gibt zwei Möglichkeiten, Daten an Unterkomponenten in Vue zu übergeben: Eine besteht darin, Props-Attribute zum Übergeben zu verwenden, und die andere darin, die V-Bind-Anweisung zum Übergeben zu verwenden. Unabhängig von der verwendeten Methode können wir eine Datenübertragung zwischen Komponenten für eine bessere Webentwicklung erreichen.

Das obige ist der detaillierte Inhalt vonWie empfängt die Vue-Komponente den von anderen übergebenen Wert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!