Explication détaillée de la méthode de liaison de données vue

Comme nous le savons tous, vue est un flux de données unidirectionnel et les composants enfants ne peuvent pas modifier directement les variables des composants parents, comme suit :

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>

enfants.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>

La page est la suivante :

Après avoir cliqué :

Ce qui précède est le moyen le plus basique pour le parent pour transmettre les données au composant enfant. Le composant enfant ne modifie pas les variables. Affecte le composant parent, et si les composants parent et enfant veulent être synchronisés ? À ce stade, vous devez utiliser la fonction this.$emit().

Premier type : transfert de modèle en V

Modification du composant parent :

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

Modification du sous-composant :

<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>

Remarque : la partie du modèle ne peut pas être omise, l'événement déclenché par this.$emit() est entré (lorsque l'événement de retour n'est pas explicitement lié sur le composant parent, l'entrée est la valeur par défaut), la valeur passée est enfant

La page est la suivante :

Après avoir cliqué :

On constate que le les valeurs​​des composants parent et enfant sont synchronisées

Deuxième type : Spécifier explicitement l'événement de réponse (@)

Modification du composant parent :

<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>

Modification du sous-composant :

<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>

Ici, j'ai délibérément modifié la valeur de msg après l'émission. ce n'est pas possible, j'ai donc deviné qu'émettre est une fonction asynchrone et sera à la fin de la file d'attente d'exécution, c'est-à-dire que l'affectation « des enfants » ici est finalement écrasée.

Il convient de mentionner que le deuxième paramètre de this.$emit() peut transmettre la valeur au composant parent. C'est très utile ici. Vous pouvez en faire l'expérience par vous-même

La page est la suivante :

Après avoir cliqué :

Les deux méthodes peuvent essentiellement atteindre les résultats attendus. Vous pouvez l'utiliser en fonction de la situation spécifique

. Après avoir parlé de la communication entre père et fils, il est naturel de communiquer entre les composants enfant et enfant. Oui, en fait, vous êtes intelligent et auriez dû comprendre comment le faire. C'est vrai, il utilise le composant parent comme tremplin pour permettre aux composants enfants d'obtenir des effets de communication.

Voici un petit exemple :

Composant parent :

<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>

Sous-composant un :

<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>

Sous-composant deux :

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

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

La page est comme suit : Cliquez sur Après :

Cet article présente l'explication détaillée de la méthode de liaison de données vue Pour en savoir plus. contenu associé, veuillez faire attention au réseau chinois php.

Recommandations associées :

Classe de pagination PHP+MySQL simple

Deux constructeurs de tableaux arborescents sans récursion

HTML vers Excel, et réaliser des fonctions d'impression et de téléchargement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!