Mixins et directives personnalisées
Réutilisez la logique avec des mixins et créez des directives personnalisées.
Mixins et directives personnalisées est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Réutiliser la logique
À mesure que les apps grandissent, vous retrouvez la même logique dans de nombreux composants. Vue propose plusieurs façons de la partager. Cette leçon en présente deux : l'ancienne approche fondée sur les mélanges et les puissantes directives personnalisées.
Qu'est-ce qu'un mélange ?
Un mélange est un objet contenant des options de composant (données, méthodes et points d'extension) qui est fusionné avec chaque composant qui l'utilise. C'était la manière classique de réutiliser la logique dans Vue 2.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Utiliser un mélange
Ajoutez un mélange à un composant dans le tableau mixins. Ses options sont fusionnées avec les propres options du composant.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Inconvénients des mélanges
Les mélanges posent de vrais problèmes : il est difficile de savoir d'où vient une propriété (source implicite), les noms peuvent entrer en collision entre les mélanges et les règles de fusion deviennent confuses. Ces difficultés ont conduit à une meilleure approche.
Les fonctions composables : une meilleure approche
Dans Vue 3, les fonctions composables (des fonctions utilisant l'API de composition) remplacent les mélanges. Elles rendent les sources explicites, évitent les conflits de noms et se combinent proprement. Privilégiez-les dans le nouveau code.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Utiliser une fonction composable
Appelez la fonction composable dans setup et déstructurez exactement ce dont vous avez besoin : la source est ainsi évidente et explicite.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Qu'est-ce qu'une directive personnalisée ?
Une directive personnalisée regroupe un comportement DOM de bas niveau que vous pouvez associer à des éléments avec v-name. Elle est idéale pour manipuler directement le DOM, par exemple pour gérer le focus, le défilement ou les infobulles.
Enregistrer une directive globale
Enregistrez une directive sur l'app avec app.directive. Son nom est utilisé dans les modèles avec le préfixe v-.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Points d'extension des directives
Les directives possèdent des points d'extension du cycle de vie : mounted (élément inséré), updated (composant mis à jour), beforeUnmount (nettoyage) et d'autres, qui reprennent le cycle de vie des composants.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})L'objet de liaison
Le deuxième argument du point d'extension est la liaison. Il contient value (la valeur transmise), arg (après deux-points) et modifiers (après des points).
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Directives locales
Pour les directives utilisées dans un seul composant, enregistrez-les localement avec l'option directives plutôt que globalement.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Vérification rapide
Évaluez vos connaissances sur les mélanges et les directives.
Récapitulatif
Les mélanges fusionnent des options dans les composants, mais souffrent de sources implicites et de conflits de noms ; préférez les fonctions composables dans Vue 3. Les directives personnalisées, enregistrées avec app.directive ou localement, regroupent des comportements du DOM au moyen de points d'extension comme mounted et d'un objet de liaison. Vous allez maintenant regrouper des fonctionnalités dans une extension réutilisable.
Questions Fréquemment Posées
La leçon « Mixins et directives personnalisées » est-elle gratuite ?
Oui — le texte complet de « Mixins et directives personnalisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Mixins et directives personnalisées » ?
Réutilisez la logique avec des mixins et créez des directives personnalisées. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Mixins et directives personnalisées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mixins et directives personnalisées
- Développement de plugins
- Structure de dossiers évolutive