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.

1. Props
   Dans VUE3, nous pouvons utiliser des accessoires pour transmettre des données des composants parents aux composants enfants. Dans le composant parent, nous pouvons ajouter l'attribut à la balise du composant enfant, et dans le composant enfant, nous pouvons utiliser cet attribut. Voici un exemple d'utilisation du composant  :

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'.

2. $emit
   Les composants parents de VUE3 peuvent utiliser la méthode '$emit' pour envoyer des événements aux composants enfants. Les composants enfants peuvent s'inscrire à ces événements en utilisant la méthode « $on ». Voici un exemple d'envoi et de réception d'événements :

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.

3. Event Bus
   Parfois, vous devrez peut-être partager des données ou des événements entre plusieurs composants. À l’heure actuelle, nous pouvons utiliser Event Bus pour la communication. Event Bus est une instance VUE3 utilisée pour gérer les événements et les données dans l'application. Voici un exemple d'utilisation d'Event Bus :

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!