Mixins och anpassade direktiv
Återanvänd logik med mixins och skapa anpassade direktiv.
Mixins och anpassade direktiv är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.
Återanvända logik
När appar växer hittar du samma logik i många komponenter. Vue erbjuder flera sätt att dela den. Den här lektionen behandlar två: det äldre tillvägagångssättet med mixins och kraftfulla anpassade direktiv.
Vad är en mixin?
En mixin är ett objekt med komponentalternativ (data, metoder och hooks) som slås samman med varje komponent som använder det. Det var det klassiska sättet att återanvända logik i Vue 2.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Använda en mixin
Lägg till en mixin i en komponent via arrayen mixins. Dess alternativ slås samman med komponentens egna alternativ.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Nackdelar med mixins
Mixins har verkliga problem: det är oklart var en egenskap kommer ifrån (en implicit källa), namn kan krocka mellan mixins och reglerna för sammanslagning blir förvirrande. Dessa problem ledde till ett bättre tillvägagångssätt.
Composables: det bättre sättet
I Vue 3 ersätter composables (funktioner som använder Composition API) mixins. De gör källorna explicita, undviker namnkonflikter och kan kombineras på ett tydligt sätt. Föredra dem i ny kod.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Använda en composable
Anropa composable-funktionen i setup och destrukturera exakt det du behöver. Då blir källan tydlig och explicit.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Vad är ett anpassat direktiv?
Ett anpassat direktiv paketerar lågnivåbeteende i DOM som du kan koppla till element med v-name. Det passar utmärkt för direkt DOM-manipulation, som fokusering, rullning eller verktygstips.
Registrera ett globalt direktiv
Registrera ett direktiv i appen med app.directive. Namnet används i mallar med prefixet v-.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Direktiv-hooks
Direktiv har livscykel-hooks: mounted (elementet har infogats), updated (komponenten har uppdaterats), beforeUnmount (rensning) och andra, som speglar komponentens livscykel.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Binding-objektet
Det andra hook-argumentet är binding. Det innehåller value (det skickade värdet), arg (efter ett kolon) och modifiers (efter punkter).
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Lokala direktiv
För direktiv som bara används i en komponent registrerar du dem lokalt med alternativet directives i stället för globalt.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Snabbtest
Testa dina kunskaper om mixins och direktiv.
Sammanfattning
Mixins slår samman alternativ med komponenter men lider av implicita källor och namnkonflikter. Föredra composables i Vue 3. Anpassade direktiv, som registreras med app.directive eller lokalt, paketerar DOM-beteende med hjälp av hooks som mounted och ett binding-objekt. Därefter paketerar du funktionalitet som ett återanvändbart plugin.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Mixins och anpassade direktiv” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Mixins och anpassade direktiv”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Mixins och anpassade direktiv”?
Återanvänd logik med mixins och skapa anpassade direktiv. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Mixins och anpassade direktiv”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mixins och anpassade direktiv
- Utveckling av pluginer
- Skalbar mappstruktur