Maison > Article > interface Web > Premiers pas avec le développement VUE3 : utiliser Vue.js pour communiquer entre les composants
À mesure que les applications Web modernes continuent de gagner en complexité et en évolutivité, les frameworks à composants deviennent de plus en plus importants. Vue.js est un framework JavaScript populaire qui utilise une approche composée de composants pour créer des applications Web. La composantonisation nous permet de créer des blocs de code réutilisables et maintenables et de les combiner en applications complètes dotées de fonctionnalités complexes. Dans cet article, nous aborderons la communication inter-composants de VUE3. Il s’agit d’une technologie clé car elle permet aux composants de se transmettre des informations afin qu’ils puissent travailler ensemble et accomplir des tâches.
Vue.component('child-component',{ props: ['message'], template: '<div>{{ message }}</div>' }); var app = new Vue({ el: '#app', data: { parentMessage: 'Hello from parent' } });
Dans cet exemple, nous définissons un composant enfant qui contient un attribut 'props' qui peut recevoir la valeur de 'parentMessage'. Dans le composant parent, nous lions 'parentMessage' à la propriété du composant enfant via 'v-bind' :
<div id="app"> <child-component v-bind:message="parentMessage"></child-component> </div>
La directive 'v-bind' indique ici à VUE3 de lier la valeur de 'parentMessage' à celle du composant enfant. l'attribut 'message'.
Vue.component('child-component',{ template: '<button v-on:click="notify">Click me</button>', methods:{ notify: function(){ this.$emit('clicked'); } } }); var app = new Vue({ el: '#app', methods:{ handleClick: function(){ alert('Button clicked'); } } });
Dans cet exemple, le composant enfant 'child-component' définit une méthode 'notify' qui utilise '$emit' pour envoyer un événement appelé 'clicked'. Dans le composant parent, nous pouvons utiliser la directive 'v-on' pour lier l'événement 'clicked' à la méthode 'handleClick' :
<div id="app"> <child-component v-on:clicked="handleClick"></child-component> </div>
Lorsque l'utilisateur clique sur le bouton du composant enfant, cela déclenchera la 'notify' méthode, ce qui entraîne l'envoi de l'événement « cliqué ». Ensuite, la méthode 'handleClick' dans le composant parent sera appelée et une boîte de dialogue contextuelle s'affichera.
var bus = new Vue(); Vue.component('component-a',{ template: '<button v-on:click="triggerEvent">Click me</button>', methods:{ triggerEvent: function(){ bus.$emit('event-from-a'); } } }); Vue.component('component-b',{ template: '<div>{{ message }}</div>', data:function(){ return { message: '' }; }, created:function(){ var _this = this; bus.$on('event-from-a',function(){ _this.message = 'Received event from Component A'; }); } }); var app = new Vue({ el: '#app' });
Dans cet exemple, nous créons une instance VUE3 nommée 'bus' puis l'utilisons dans deux composants. Le composant « composant-a » a déclenché un événement nommé « événement-from-a » et l'a envoyé à l'instance « bus », et le composant « composant-b » a enregistré « l'événement-from-a » dans le « bus ». événement d'instance et met à jour la propriété 'message' dans 'data' lorsque l'événement se déclenche.
Grâce à la pratique ci-dessus, vous pouvez apprendre que l'utilisation de la communication des composants VUE3 peut facilement transférer des données et des événements entre les composants parents et enfants. En même temps, Event Bus fournit une méthode simple pour partager des données et des événements entre plusieurs composants. Dans la pratique, il est nécessaire d'utiliser de manière flexible les méthodes de communication des composants en fonction de la situation réelle du projet pour améliorer l'efficacité du développement et réaliser les fonctions nécessaires.
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!