Comment transférer des données d'un composant enfant vers un composant parent dans Vue 2.4?

Question

Salut Je suis nouveau à Vue et je voulais poser une question sur la liaison de la valeur du composant parent à un composant enfant et lorsque cette valeur change dans l'enfant que je veux changer pour le parent.

J'ai fait un JS Fiddle montrant où j'accomplis ceci mais je suis confus quant à pourquoi cela fonctionne comme il le fait. Si je passe un Object au prop, il liera les valeurs, mais si je les passe telles quelles, j'obtiendrai l'erreur 'mutation'.

JS:

var demo = new Vue({ 
    el: '#demo', 
    data: { 
     Name: { firstName: "Bonjur", secondName: "Captain"}, 
     firstName: "Hello", 
     secondName: "World", 
    } 
}); 

Vue.component('working', { 
    template: '<div>' + 
     'First: <input v-model="names.firstName" />' + 
     'Second: <input v-model="names.secondName" /> ' + 
     '</div>', 
    props: { 
     names: null 
    } 
}) 

Vue.component('broken', { 
    template: '<div>' + 
     'First: <input v-model="first" />' + 
     'Second: <input v-model="second" /> ' + 
     '</div>', 
    props: { 
     first: null, 
     second: null 
    } 
}) 

HTML

<div id="demo"> 
    <working :names="Name"></working> 
    <broken :first="firstName" :second="secondName" ></broken> 
    <p> {{Name.firstName}} {{Name.secondName}} </p> 
    <p> {{firstName}} {{secondName}} </p> 
</div> 

Mon objectif initial était d'avoir la « démo » objet Vue le principal objet de données que je vais poster sur le serveur, et ont plusieurs composants qui modifient des parties spécifiques de données dans l'objet principal 'démo' de leur propre manière unique, donc vraiment juste une séparation des préoccupations.

Tous les commentaires/opinions/suggestions sur la conception d'une application de cette façon en utilisant Vue sont les bienvenus.

J'ai également lu que vous pouvez écouter les événements de l'enfant et modifier la valeur parente de cette façon.

Comment ce type de liaison de données enfant à parent a été conçu ou prévu pour être fait dans Vue js v2.4?

Pourquoi l'exemple ci-dessus fonctionne-t-il comme il le fait?

Answer 1

Il travaille lorsque vous passez l'objet parce que JavaScript:

• objets sont passés par référence

• Primitives sont passés par valeur

vous une caisse this saches environ transmis par référence et transmis par valeur

Lorsque vous passez l'objet en tant que prop et que vous le modifiez dans le composant enfant, l'objet transmis est muté car seul l'emplacement de mémoire de l'objet est passé et non un nouvel objet.

Lorsque vous transmettez les primitives comme accessoires, vous créez une nouvelle copie et est reçue par le composant enfant. La raison pour laquelle vous modifiez la valeur dans le composant broken est que la valeur nouvellement copiée n'est pas celle d'origine dans l'instance racine.

Pour que cela fonctionne, vous devez émettre un événement vers le composant parent à partir du composant enfant. Voir custom events.

Il est recommandé d'utiliser des événements pour muter les accessoires reçus du parent.

Voici le updated fiddle