Comment transmettre des valeurs entre les composants parent et enfant de Vue ? Introduction aux méthodes de communication

Vue est un framework de développement front-end couramment utilisé, et l'idée de composantisation est au cœur de Vue. Le cœur de l’idée de la création de composants est de diviser les composants en composants afin de rendre les composants complexes plus clairs et plus faciles à entretenir. Ce que nous voulons faire à ce stade, c'est communiquer entre ces composants. La transmission de méthodes des composants parents aux composants enfants est une technologie importante. Cet article explique comment transmettre des méthodes entre les composants Vue, en particulier des composants parents aux composants enfants.

1. Méthodes de transmission des composants parents

Tout d'abord, il existe de nombreuses façons de transmettre des méthodes des composants parents aux composants enfants dans Vue. Examinons d'abord l'exemple le plus simple.

Tout d'abord, nous définissons une méthode dans le composant parent :

methods: {
    hello(){
        console.log('hello');
    }
}

Ensuite, nous devons transmettre cette méthode au composant enfant. Dans Vue, les composants parents peuvent transmettre des données et des méthodes aux composants enfants via des accessoires.

Dans le composant parent, nous devons compléter la méthode de passage de la manière suivante :

<child-component :hello="hello"></child-component>

Dans le composant enfant, nous devons recevoir la méthode passée par le composant parent via les accessoires :

props: {
    hello: Function
}

Ensuite, nous devons appeler dans le composant enfant Méthode :

<button @click="hello()">Click me</button>

De cette façon, nous pouvons appeler avec succès la méthode transmise par le composant parent dans le composant enfant.

2. Le sous-composant transmet les méthodes au composant parent

Ensuite, nous présentons comment les sous-composants transmettent les méthodes aux composants parents. Comparée à la façon dont le composant parent transmet les méthodes au composant enfant, cette méthode est plus compliquée.

Tout d'abord, dans le composant enfant, nous définissons une méthode :

methods: {
    send(){
        this.$emit('demo-event');
    }
}

Ici, nous définissons une méthode d'envoi, qui déclenche un événement nommé "demo-event" via $emit. Il convient de noter que lorsque nous passons des méthodes dans Vue, nous ne transmettons pas la fonction elle-même directement, mais la passons via des événements.

Ensuite, nous devons écouter l'événement dans le composant parent. Le code spécifique est le suivant :

<child-component @demo-event="handleDemo"></child-component>

Ici, nous utilisons @demo-event pour écouter l'événement "demo-event" déclenché par le composant enfant et définissez-le dans le composant parent. Une fonction de gestion d'événements handleDemo est créée.

Ensuite, nous devons définir la méthode handleDemo dans le composant parent :

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

De cette façon, lorsque la méthode send est déclenchée dans le composant enfant, l'événement "demo-event" sera déclenché, et la méthode handleDemo sera être exécuté.

3. Résumé

Grâce aux deux méthodes ci-dessus, nous pouvons transmettre des méthodes entre les composants Vue et compléter la communication pour réaliser la réutilisation des composants et le fractionnement de pages complexes. Dans les projets réels, nous utilisons souvent cette méthode pour communiquer entre les composants.

Il convient de noter que la manière de transmettre des méthodes dans Vue se fait via des événements, ce qui est également un concept très important dans la composantisation de Vue. Dans le même temps, lorsque vous utilisez cette méthode, vous devez également faire attention aux noms des méthodes définies dans le composant parent et dans le composant enfant pour garantir que l'événement peut être déclenché avec succès.

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!