This repository has been archived by the owner on Apr 8, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Post : call a method of a child component in vue.js
- Loading branch information
1 parent
03fcff0
commit 0b5de61
Showing
1 changed file
with
104 additions
and
0 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
content/dev/vuejs-appeler-une-methode-sur-un-composant-enfant.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
--- | ||
type: "post" | ||
title: "Vue.js : Appeler une methode sur un composant enfant" | ||
date: "2020-08-12" | ||
publishdate: "2020-08-12" | ||
draft: false | ||
slug: "vuejs-appeler-une-methode-sur-un-composant-enfant" | ||
description: "Comment appleler une methode d'un composant enfant depuis son parent en Vue.js" | ||
|
||
thumbnail: "/images/posts/thumbnails/vuejs.jpg" | ||
header_img: "/images/posts/headers/vuejs.jpg" | ||
tags: ["Vuejs","Javascript"] | ||
categories: ["Dev", "Javascript"] | ||
|
||
author_username: "mcolin" | ||
--- | ||
|
||
L'approche composant de [Vue.js](https://fr.vuejs.org/index.html) permet de disiviser votre interface en petits composants simples et réutilisables. Si cela permet effectivement de simplifier votre code, cela complique néanmoins la communication entre les différents parties de votre interface. Nous allons voir dans cet article comment un composant parent peut piloter composant enfant en appelant ces méthodes. | ||
|
||
<!--more--> | ||
|
||
Vous êtes surement déjà habituer à utiliser les canaux de communication classique de Vue.js pour faire communiquer vos composant entre eux, à savoir [les props](https://fr.vuejs.org/v2/guide/components-props.html) pour la données descendantes (parent vers enfant) et [les évennements](https://fr.vuejs.org/v2/guide/components.html#Envoyer-des-messages-aux-parents-avec-les-evenements) pour les données montantes (enfant vers parent). | ||
|
||
Si les événements sont très pratiques pour appeler une méthode d'un composant en réagissant à un événement lancé par un composant enfant, il n'est pas toujours simple d'utiliser les props pour piloter un composant enfant. | ||
|
||
Il est parfois plus simple **d'appeler une méthode d'un composant enfant directement depuis son parent**. | ||
|
||
{{< highlight html >}} | ||
<script> | ||
// ComposantEnfant.vue | ||
export default { | ||
methods: { | ||
doSomething() { | ||
// do something | ||
}, | ||
}, | ||
} | ||
</script> | ||
{{< /highlight >}} | ||
|
||
Pour cela, il faut que votre composant enfant dispose de l'attribut `ref` avec une valeur unique dans le composant parent. | ||
|
||
{{< highlight html >}} | ||
<script> | ||
// ComposantParent.vue | ||
export default { | ||
components: { | ||
ComposantEnfant, | ||
}, | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<ComposantEnfant ref="foobar"></ComposantEnfant> | ||
</div> | ||
</template> | ||
{{< /highlight >}} | ||
|
||
Vous pouvez ensuite accéder à votre composant enfant avec `$refs.foobar` et appeler dessus directement ses méthodes. | ||
|
||
Vous pouvez le faire soit dans le code du composant : | ||
|
||
{{< highlight html >}} | ||
<script> | ||
// ComposantParent.vue | ||
export default { | ||
components: { | ||
ComposantEnfant, | ||
}, | ||
methods: { | ||
foobar() { | ||
this.$refs.foobar.doSomething() | ||
}, | ||
}, | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<ComposantEnfant ref="foobar"></ComposantEnfant> | ||
</div> | ||
</template> | ||
{{< /highlight >}} | ||
|
||
Soit directement dans le template : | ||
|
||
{{< highlight html >}} | ||
<script> | ||
// ComposantParent.vue | ||
export default { | ||
components: { | ||
ComposantEnfant, | ||
}, | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<button v-on:click="$refs.foobar.doSomething()"></button> | ||
<ComposantEnfant ref="foobar"></ComposantEnfant> | ||
</div> | ||
</template> | ||
{{< /highlight >}} |