Comment modifier la valeur des accessoires dans le sous-composant vue2.0 et transmettre la valeur au composant parent

Ci-dessous, je vais partager avec vous un article sur la façon de modifier la valeur des accessoires d'un sous-composant vue2.0 et de transmettre la valeur au composant parent. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. .

Pourquoi avons-nous envie de modifier les données dans prop ? Il y a généralement deux raisons :

prop est transmis comme valeur initiale et le sous-composant souhaite l'utiliser comme donnée locale

prop est transmis comme valeur initiale et est traité par le sous-composant dans une autre sortie de données.

Pour les deux raisons, la réponse correcte est :

Définissez une variable locale et initialisez-la avec la valeur de prop :

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

Définissez une propriété calculée, traitez la valeur de prop et renvoyez-la.

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

Notez que les objets et les tableaux sont des types référence en JavaScript, pointant vers le même espace mémoire. Si prop

est un objet ou un tableau, sa modification à l'intérieur du composant enfant affectera le. statut du composant parent.

Nous savons que le composant parent utilise des accessoires pour transmettre des données au composant enfant, mais comment le composant enfant communique-t-il avec le composant parent ? C'est là que le système d'événements personnalisés de Vue s'avère utile. https://cn.vuejs.org/v2/guide/components.html#Événements personnalisés

Définir deux variables dans le composant parent et les lier dynamiquement au composant enfant

Sous-composante :

Composant parent : Définissez deux méthodes et liez-les à l'événement personnalisé du composant enfant

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

Articles connexes :

Exemple de code d'un serveur de fichiers statiques de nœud pratique

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

Méthode Vue.js pour déplacer la position du tableau et mettre à jour la vue en même temps

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!