Detaillierte Erläuterung der Vue-Datenbindungsmethode

Wie wir alle wissen, ist Vue ein einseitiger Datenfluss, und untergeordnete Komponenten können Variablen in der übergeordneten Komponente nicht direkt ändern, wie folgt:

parent.vue

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        }
    }
</script>

children.vue

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

Die Seite sieht wie folgt aus:

Klicken Sie danach:

Das Obige ist die einfachste Möglichkeit für die Eltern Übergeben Sie Daten an die untergeordnete Komponente. Änderungen an Variablen durch die untergeordnete Komponente wirken sich nicht auf die übergeordnete Komponente aus. Was ist, wenn die übergeordnete und die untergeordnete Komponente synchronisiert werden sollen? Zu diesem Zeitpunkt sollten Sie die Funktion this.$emit() verwenden.

Erster Typ: V-Modell-Übertragung

Änderung der übergeordneten Komponente:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>

Änderung der Unterkomponente:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;input&#39;, "child")
            }
        }
    }
</script>

Hinweis: Der Modellteil kann nicht weggelassen werden, das durch this.$emit() ausgelöste Ereignis ist Eingabe (wenn das Rückgabeereignis nicht explizit an die übergeordnete Komponente gebunden ist, Eingabe). ist die Standardeinstellung), der übergebene Wert ist untergeordnet

Die Seite sieht wie folgt aus:

Nach dem Klicken:

Es ist ersichtlich, dass die Werte von die übergeordneten und untergeordneten Komponenten werden synchronisiert

Zweiter Typ: Geben Sie das Antwortereignis explizit an (@)

Änderung der übergeordneten Komponente:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children @upChange="changeMsg" :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号，嘤嘤嘤"
            }
        }
    }
</script>

Änderung der untergeordneten Komponente:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "给你一个value")
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

Hier habe ich absichtlich den Wert von msg nach emit geändert. Es stellt sich heraus, dass dies nicht möglich ist, also vermute ich das emit ist eine asynchrone Funktion, die am Ende der Warteschlange ausgeführt wird, was bedeutet, dass der hier zugewiesene Wert „von Kindern“ schließlich überschrieben wird.

Es ist erwähnenswert, dass der zweite Parameter von this.$emit() den Wert an die übergeordnete Komponente übergeben kann. Dies ist hier sehr nützlich. Sie können es selbst erleben.

Die Seite sieht wie folgt aus:

Nach dem Klicken:

Beide Methoden können grundsätzlich die erwarteten Ergebnisse erzielen. Sie können sie je nach Situation verwenden

Nachdem wir über die Kommunikation zwischen Vater und Sohn gesprochen haben, ist es selbstverständlich, zwischen Kind und Kind zu kommunizieren. Ja, Sie sind tatsächlich schlau und hätten herausfinden sollen, wie das geht. Richtig, es nutzt die übergeordnete Komponente als Sprungbrett, damit untergeordnete Komponenten Kommunikationseffekte erzielen können.

Hier ein kleines Beispiel:

Übergeordnete Komponente:

<template>
    <p>
        <children @upChange="changeMsg" :msg="msg"></children>
        <children2 :msg2="msg2"></children2>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    import children2 from &#39;@/components/children2&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;,
                msg2: &#39;from parent&#39;
            }
        },
        components: {
            children,
            children2
        },
        methods: {
            changeMsg(value) {
                this.msg = value
                this.changeChild2()
            },
            changeChild2() {
                this.msg2 = "children2收到 children2收到  over over！"
            }
        }
    }
</script>

Unterkomponente eins:

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击呼叫children2</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "children2，children2，收到请回答，收到请回答")
            }
        }
    }
</script>

Unterkomponente zwei:

<template>
    <p>
       <p>children2: {{ msg2 }}</p>
    </p>
</template>
<script>
    export default {
        name: &#39;children2&#39;,
        data () {
            return {

            }
        },
        props: [&#39;msg2&#39;]
    }
</script>

Die Seite sieht wie folgt aus: Nach dem Klicken:

Dieser Artikel enthält eine ausführliche Erläuterung der Vue-Datenbindungsmethode. Weitere verwandte Inhalte finden Sie hier zur chinesischen PHP-Website.

Verwandte Empfehlungen:

Einfache PHP+MySQL-Paging-Klasse

Zwei Baumarray-Konstruktoren ohne Rekursion

HTML in Excel umwandeln und Druck- und Downloadfunktionen realisieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Datenbindungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!