Comment implémenter le transfert de données, la modification et la mise à jour des composants parent-enfant dans Vue (tutoriel détaillé)

Ci-dessous, je partagerai avec vous un article sur les méthodes de transfert de données, de modification et de mise à jour des composants parent-enfant de Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

La relation de données entre les composants parent et enfant, je diviserai la situation en 4 types suivants :

Le composant parent modifie child Les données du composant sont mises à jour en temps réel.

Le sous-composant transmet les données du sous-composant via $emit.$data fait référence à toutes les données contenues dans les données (. return{...}) du composant actuel,

this.$emit('data',this.$data);

Recevez ensuite les données via la méthode getinputdata du composant parent

@data='getinputdata'

Les données sont les données transmises par. en modifiant ces données, le composant enfant peut être mis à jour en temps réel via le composant parent

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

Le sous-composant modifie les données du composant parent

Les données du composant parent ne peut pas être modifié dans le sous-composant, uniquement via la méthode $emit ci-dessus dans le composant parent Modifier les données dans.

Vous pouvez vous référer aux événements personnalisés sur le site officiel de vue : https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A% E4%B9% 89%E4%BA%8B%E4%BB%B6

Le composant enfant obtient les données du composant parent et les modifie mais ne les met pas à jour en temps réel

1. Le composant enfant sera parent Les données transmises par le composant via les accessoires sont ensuite affectées à la variable déclarée let ou var, et cette variable peut ensuite être utilisée.

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. Le composant enfant transfère les données transmises par le composant parent via les accessoires, puis attribue la valeur des accessoires à la variable dans data(return{...}), puis utilise cette variable. .

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

Vous pouvez vous référer aux événements personnalisés sur le site officiel de vue : https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90 %91%E6 %95%B0%E6%8D%AE%E6%B5%81

Le composant parent obtient les données du composant enfant et les modifie mais ne les met pas à jour en temps réel

ici La méthode est la même que 'Le composant enfant obtient les données du composant parent et les modifie mais ne les met pas à jour en temps réel' Seule la manière de transmettre la valeur est différente. Le composant enfant transmet la valeur au composant parent via $emit.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode du composant de saisie du formulaire d'événement personnalisé Vue.js

vue.js déplace la position du tableau et se met à jour à la en même temps Méthode View

Méthode vue.js ou js pour implémenter le tri chinois A-Z

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!