Introduction
Je vais vous montrer ici comment construire un composant fonctionnel en utilisant defineComponent.
Je vais partager un exemple rencontré dans la série des défis Vue.js, où j’ai appris à utiliser cette fonctionnalité.
Lisez bien tous les commentaires dans le code ci-dessous.
Exemple de code
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
|
// On utilise TypeScrit ci-dessous
import { h } from "vue";
import { defineComponent } from "vue";
const MyButton = defineComponent(
// ci-dessous, il s'agit de la méthode ``setup` où l'on déstructure le contexte
// pour extraire les emit et les slots
(props, { emit, slots }) => {
// cette fonction flèchée est similaire à la fonction `return {}` que vous utilisez dans la fonction setup d'un composant SFC
return () => {
// appeler la fonction créant les noeuds virtuels de la DOM
return h(
// ajouter un élément de type bouton
"button",
{
// ... avec l'attribut disabled assigné
// à la valeur de l'attribut disabled
disabled: props.disabled,
// bind a click event to custom-click emit
onClick: () => emit("custom-click"),
},
// transmet le contenu du slot à l'élément
slots.default?.()
);
};
},
// des options supplémentaires, par exemple déclarer des `props` et des `emits`
{
// nom du composant
name: "MyButton",
// définition des `props`
props: {
disabled: { type: Boolean, default: false },
},
// définition des `emits`
emits: ["custom-click"],
}
);
export default MyButton;
|
Maintenant, vous comprenez Vue.js un peu plus en profondeur.
En ce qui concerne la template, l’utilisation reste inchangée par rapport à un composant SFC classique.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script setup lang="ts">
import { ref } from "vue";
import MyButton from "./MyButton";
const disabled = ref(false);
const onClick = () => {
disabled.value = !disabled.value;
};
</script>
<template>
<!--
`:disabled` est éauivalent à `:disabled="disabled"` depuis Vue 3.4+
lire https://vuejs.org/guide/essentials/template-syntax.html#same-name-shorthand
-->
<MyButton :disabled @custom-click="onClick"> my button </MyButton>
</template>
|
N’hésitez pas à me contacter si vous voyez des erreurs ou si vous voulez simplement dire merci.
Crédit: Photo par Kelly Sikkema sur Unsplash.
