Aggiornamento dei dati genitori tramite componente secondaria?

Qual è la procedura corretta per aggiornare i dati genitori tramite componente secondaria?

Nel componente figlio – sto modificando i dati genitori direttamente tramite i props . Non sono sicuro se questo è un modo sbagliato per farlo.

Secondo il vue doc:

quando la properties; padre viene aggiornata, scenderà verso il bambino, ma non l'altro.

Esempio di componente secondario:

 <script> export default { props: ['user'], data: function () { return { linkName: '', linkValue: '', } }, methods: { addLink: function (event) { event.preventDefault(); this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => { this.user.links.push(response.data); }, response => { // Error } }); }, } } </script> 

Ho usato this.user.links.push(response.data); che modifica i dati direttamente al componente padre tramite i props: ['user']

Come ha giustamente detto, i props non sono intesi per passare i dati dal figlio a genitore. Il legame dei dati è solo a senso unico.

La procedura corretta è per il componente figlio submit un evento via $ emit alla componente padre, insieme ad un valore (facoltativo).

Nel tuo caso, puoi fare quanto segue nel metodo addLink di componente addLink :

 this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => { this.$emit("update-user-links", response.data); // Send an event to parent, with data }, response => { // Error }); 

E il tuo genitore può ascoltarlo come segue:

 <my-user-link-component :user="userData" v-on:update-user-links="addUserLink"></my-user-link-component> 

o la syntax breve:

 <my-user-link-component :user="userData" @update-user-links="addUserLink"></my-user-link-component> 

Nel precedente, si assegna un metodo addUserLink per gestire l'evento del componente addUserLink . Nella componente padre, è necessario definire questo metodo nel modo seguente:

 methods: { // ... your other methods, addUserLink: function(linkData) { this.userData.links.push(linkData); } } 

Vantaggi di questo legame unidirezionale dall'alto al basso e il meccanismo dell'evento:

  • Il componente principale può scegliere di ignorare gli events se vuole, rendendo così i componenti secondari riutilizzabili in altri contesti.
  • I tuoi componenti figlio (supponendo di avere molti) saranno autorizzati a submit solo gli events verso l'alto, cosa che è più facile da eseguire in debug quando confrontati a ciascuno di essi mutando direttamente lo stato parentale.