Mixins und benutzerdefinierte Direktiven
Verwenden Sie Logik mit Mixins wieder und erstellen Sie benutzerdefinierte Direktiven.
Mixins und benutzerdefinierte Direktiven ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Logik wiederverwenden
Wenn Anwendungen wachsen, finden Sie dieselbe Logik in vielen Komponenten. Vue bietet mehrere Möglichkeiten, diese zu teilen. In dieser Lektion behandeln Sie zwei davon: den älteren Ansatz mit Mixins und leistungsfähige benutzerdefinierte Direktiven.
Was ist ein Mixin?
Ein Mixin ist ein Objekt mit Komponentenoptionen wie Daten, Methoden und Hooks, das mit jeder Komponente zusammengeführt wird, die es verwendet. In Vue 2 war dies die klassische Methode zur Wiederverwendung von Logik.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Ein Mixin verwenden
Fügen Sie einer Komponente über das mixins-Array ein Mixin hinzu. Seine Optionen werden mit den eigenen Optionen der Komponente zusammengeführt.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Nachteile von Mixins
Mixins bringen einige echte Probleme mit sich: Es ist unklar, woher eine Eigenschaft stammt, Namen können zwischen Mixins kollidieren und die Regeln für das Zusammenführen werden unübersichtlich. Diese Nachteile führten zu einem besseren Ansatz.
Composables: Der bessere Weg
In Vue 3 ersetzen Composables, also Funktionen mit der Composition API, die Mixins. Sie machen Quellen explizit, vermeiden Namenskonflikte und lassen sich sauber kombinieren. Bevorzugen Sie sie für neuen Code.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Ein Composable verwenden
Rufen Sie das Composable in setup auf und destrukturieren Sie genau das, was Sie benötigen. Dadurch ist die Quelle offensichtlich und explizit.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Was ist eine benutzerdefinierte Direktive?
Eine benutzerdefinierte Direktive kapselt DOM-Verhalten auf niedriger Ebene, das Sie mit v-name an Elemente anhängen können. Sie eignet sich ideal für direkte DOM-Manipulationen wie Fokussieren, Scrollen oder Tooltips.
Eine globale Direktive registrieren
Registrieren Sie eine Direktive mit app.directive bei der Anwendung. Der Name wird in Templates mit dem Präfix v- verwendet.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Direktiven-Hooks
Direktiven verfügen über Lifecycle-Hooks: mounted (Element eingefügt), updated (Komponente aktualisiert), beforeUnmount (Bereinigung) und weitere, die den Lifecycle der Komponente widerspiegeln.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Das Binding-Objekt
Das zweite Hook-Argument ist das Binding. Es enthält value (den übergebenen Wert), arg (nach einem Doppelpunkt) und modifiers (nach Punkten).
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Lokale Direktiven
Für Direktiven, die nur in einer Komponente verwendet werden, registrieren Sie sie lokal mit der Option directives statt global.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Kurzer Check
Testen Sie Ihr Wissen über Mixins und Direktiven.
Zusammenfassung
Mixins führen Optionen mit Komponenten zusammen, leiden aber unter impliziten Quellen und Namenskonflikten. Bevorzugen Sie in Vue 3 Composables. Benutzerdefinierte Direktiven werden mit app.directive oder lokal registriert und kapseln DOM-Verhalten mithilfe von Hooks wie mounted und einem binding-Objekt. Als Nächstes kapseln Sie Funktionalität als wiederverwendbares Plugin.
Häufig gestellte Fragen
Ist die Lektion „Mixins und benutzerdefinierte Direktiven“ kostenlos?
Ja — der vollständige Text von „Mixins und benutzerdefinierte Direktiven“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Mixins und benutzerdefinierte Direktiven“?
Verwenden Sie Logik mit Mixins wieder und erstellen Sie benutzerdefinierte Direktiven. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „Mixins und benutzerdefinierte Direktiven“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Mixins und benutzerdefinierte Direktiven
- Plugin-Entwicklung
- Skalierbare Ordnerstruktur