Mixins y directivas personalizadas
Reutilice lógica con mixins y cree directivas personalizadas.
Mixins y directivas personalizadas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Reutilizar la lógica
A medida que las aplicaciones crecen, la misma lógica aparece en muchos componentes. Vue ofrece varias formas de compartirla. En esta lección se cubren dos: el enfoque antiguo de los mixins y las potentes directivas personalizadas.
¿Qué es un mixin?
Un mixin es un objeto con opciones de componente (datos, métodos y hooks) que se combina con cualquier componente que lo utilice. Era la forma clásica de reutilizar lógica en Vue 2.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Usar un mixin
Añada un mixin a un componente mediante el array mixins. Sus opciones se combinan con las opciones propias del componente.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Desventajas de los mixins
Los mixins presentan problemas reales: no queda claro de dónde procede una propiedad (su origen es implícito), los nombres pueden colisionar entre mixins y las reglas de combinación resultan confusas. Estos inconvenientes dieron lugar a un enfoque mejor.
Composables: una forma mejor
En Vue 3, los composables (funciones que utilizan la API de composición) sustituyen a los mixins. Hacen explícitos los orígenes, evitan conflictos de nombres y se combinan de forma clara. Prefiéralos para el código nuevo.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Usar un composable
Llame al composable en setup y desestructure exactamente lo que necesite; el origen resulta evidente y explícito.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}¿Qué es una directiva personalizada?
Una directiva personalizada encapsula un comportamiento de bajo nivel del DOM que puede asociar a elementos mediante v-name. Es ideal para manipular directamente el DOM, por ejemplo, para gestionar el foco, el desplazamiento o los tooltips.
Registrar una directiva global
Registre una directiva en la aplicación mediante app.directive. El nombre se utiliza en las plantillas con el prefijo v-.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Hooks de las directivas
Las directivas tienen hooks de ciclo de vida: mounted (elemento insertado), updated (componente actualizado), beforeUnmount (limpieza) y otros, que reflejan el ciclo de vida de los componentes.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})El objeto de binding
El segundo argumento del hook es el binding. Contiene value (el valor proporcionado), arg (el valor posterior a dos puntos) y modifiers (los valores posteriores a los puntos).
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Directivas locales
Para las directivas que se utilizan en un solo componente, regístrelas localmente mediante la opción directives en lugar de hacerlo globalmente.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Comprobación rápida
Compruebe sus conocimientos sobre mixins y directivas.
Recapitulación
Los mixins combinan opciones con los componentes, pero sufren de orígenes implícitos y conflictos de nombres; en Vue 3, prefiera los composables. Las directivas personalizadas, registradas mediante app.directive o localmente, encapsulan comportamientos del DOM mediante hooks como mounted y un objeto de binding. A continuación, encapsulará funcionalidades como un plugin reutilizable.
Preguntas frecuentes
¿La lección «Mixins y directivas personalizadas» es gratis?
Sí — el texto completo de «Mixins y directivas personalizadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Mixins y directivas personalizadas»?
Reutilice lógica con mixins y cree directivas personalizadas. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Mixins y directivas personalizadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Mixins y directivas personalizadas
- Desarrollo de plugins
- Estructura de carpetas escalable