Comment créer une directive personnalisée ?

Question

Accepted Answer

Les **directives personnalisées** vous permettent d'encapsuler la **manipulation DOM bas niveau** en tant qu'attribut `v-*` réutilisable. Utilisez-les quand vous avez besoin d'un accès direct à un élément (focus, scroll, bibliothèques DOM tierces) — des choses que les composants/props ne couvrent pas naturellement. ## Définir une directive locale ```vue ``` La convention de nommage : une variable `vFocus` devient la directive `v-focus`. ## Hooks de directive (miroir du cycle de vie des composants) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Utiliser la valeur de liaison et l'argument ```vue ``` L'objet `binding` porte `value` (l'expression), `arg` (après le deux-points), `modifiers` (après les points), et `oldValue`. ## Un exemple pratique : click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Enregistrement global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Pourquoi c'est important Les directives personnalisées sont le bon outil pour un **comportement DOM réutilisable et bas niveau** — autofocus, click-outside, lazy-loading d'images, tooltips, intégration de bibliothèques DOM non-Vue. Elles gardent cette logique DOM impérative encapsulée et déclarative (`v-click-outside`) plutôt que dispersée dans les hooks du cycle de vie. Connaître les hooks et l'objet `binding` (value/arg/modifiers), plus nettoyer dans `unmounted`, couvre leur utilisation pratique — bien que pour la plupart de la logique UI, les composants restent le meilleur choix.