Communication des composants Vue : utilisez la directive v-once pour une communication de rendu unique

Communication des composants Vue : utilisez l'instruction v-once pour une communication de rendu unique

Dans le développement de Vue, la communication des composants est une tâche très importante. Vue propose diverses façons d'implémenter la communication entre les composants, l'une d'entre elles consistant à utiliser la directive v-once pour une communication de rendu unique. Cet article explique comment utiliser l'instruction v-once et l'explique en détail à travers des exemples de code.

Dans Vue, la directive v-once est utilisée pour spécifier le contenu qui n'est rendu qu'une seule fois. Habituellement, nous pouvons appliquer la directive v-once entre les composants parents et les composants enfants pour obtenir l'effet d'une communication de rendu unique.

Tout d'abord, nous créons un composant parent simple qui contient un bouton et un composant enfant.

2e4c03ba1a844f9ccaa1fdeb1b48713f
53e62301562861ec0948d0ede0dfd192Modifier le message65281c5ac262bf6d81768915a4a77ac0
a36ec200ae3ff7ee60c4512259e4f015
16b28748ea4df4d9c2150843fecfba68

Dans le composant parent, nous écoutons l'événement click du bouton via v-on:click et appelons la méthode changeMessage pour modifier la valeur du message. Puisque la directive v-once est utilisée dans le sous-composant, lorsque la valeur du message change, le sous-composant ne sera rendu qu'une seule fois.

Ensuite, jetons un œil au code du sous-composant.

Vue.component('child-component', {
props: ['message'],
template: 'dc6dce4a544fdca2df29d5ac0ea9906b{{ message }}16b28748ea4df4d9c2150843fecfba68'
})

Passé chez l'enfant accessoires de composant pour recevoir l'attribut de message transmis par le composant parent et l'afficher dans le composant.

Enfin, nous devons également créer une instance Vue et définir la méthode changeMessage et la valeur initiale du message dans l'instance.

new Vue({
el: '#app',
data: {

message: 'Hello Vue!'

},
méthodes: {

changeMessage: function() {
  this.message = 'Hello World!'
}

}
})

Dans l'instance Vue, la valeur initiale du message est définie sur ' Bonjour Vue ! ». Lorsque vous cliquez sur le bouton du composant parent, la méthode changeMessage est appelée, modifiant la valeur du message en « Hello World ! ». Étant donné que le sous-composant utilise la directive v-once, le contenu du sous-composant ne sera restitué qu'une seule fois et ne sera pas restitué à mesure que le message change.

Grâce à l'exemple de code ci-dessus, nous pouvons clairement voir le rôle de la directive v-once dans la communication des composants. Il peut garantir que le contenu n'est rendu qu'une seule fois, ce qui est très pratique dans les scénarios de communication de rendu unique.

Résumé :
Cet article présente la méthode d'utilisation de l'instruction v-once pour la communication de rendu unique dans la communication des composants Vue et détaille les étapes de mise en œuvre spécifiques à travers des exemples de code. En utilisant la directive v-once, nous pouvons garantir que le contenu n'est rendu qu'une seule fois, répondant ainsi au besoin d'une communication de rendu unique. Dans le développement réel, nous pouvons choisir la méthode appropriée pour la communication des composants en fonction de la situation spécifique afin d'obtenir de meilleurs résultats de développement.

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!