Je vais être 100 % honnête : le composant fonctionnel se situe à un autre niveau. Il utilise la fonction render h() dans Vue.js.
Je crois que c’est ce que Vue utilise sous le capot pour convertir votre SFC (Single File Component) ou votre code In-Template en nœuds Virtual DOM.
Je vais partager un exemple que j’ai rencontré dans la série de défis Vue.js, où j’ai appris à utiliser cette fonctionnalité.
Lisez tous les commentaires dans le code ci-dessous.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// Utilisation de TypeScrit et de l'API de composition
import { ref, h } from "vue";
// Pour typer la liste des éléments
type User = {
name: String;
};
// Pour types les `props`
type Props = {
list: User[];
activeIndex: number;
};
// Pour typer les événements ( e.g. emit)
type Events = {
toogle(index: number): void;
};
/**
* Le défi > Implémenter un composant fonctionnel :
* 1. Afficher les éléments de la liste (ul/li) avec les données de la liste
* 2. Changer la couleur du texte de l'élément de liste en rouge lorsqu'il est cliqué.
*/
const ListComponent = (props: Props, { emit }) => {
return h(
"ul", // créer un élément <ul>
props.list.map((item: User, index) =>
h(
// boucler sur la `prop` liste (équivalent au v-for)
"li", // ... pour créer un élément <li> pour chaque élément
{
// ... avec l'attribute 'key' obligatoire
key: index,
// ... avec le style en ligne pour afficher le texte
// en rouge quand l'index courant est égal à l'index
// spécifié dans la `prop` activeIndex
style: index == props.activeIndex ? { color: "red" } : null,
// ... avec l'assignement de la valeur `innerText`
innerText: item.name,
// ... et l'enregistrement de l'emit `toggle`
// sur le `onclick`
onClick: () => emit("toggle", index),
}
)
)
);
};
// Ceci liste les `props` du composant,
// mais ne les définit pas. Voir le type ci-dessus.
ListComponent.props = ["list", "active-index"];
// Ceci liste les `emits` du composant,
// mais ne les définit pas. Voir le type ci-dessus.
ListComponent.emits = ["toggle"];
const list: User[] = [
{
name: "John",
},
{
name: "Doe",
},
{
name: "Smith",
},
];
const activeIndex = ref(0);
function toggle(index: number) {
activeIndex.value = index;
}
|
Maintenant, vous comprenez Vue.js un peu plus en profondeur.
En ce qui concerne la template, l’utilisation reste identique à un composant SFC classique.
1
2
3
|
<template>
<list-component :list="list" :active-index="activeIndex" @toggle="toggle" />
</template>
|
N’hésitez pas à me contacter si vous voyez des erreurs ou si vous voulez simplement dire merci.
Crédit: Photo par Clark Tibbs sur Unsplash.
