Vue 36: Directivas Personalizadas
easy⏱ 5 mincoursevue
Hooks de ciclo de vida con acceso directo al DOM
Una directiva personalizada es un objeto con hooks de ciclo de vida — created, mounted, updated, unmounted, etc. — que reciben el elemento real del DOM más un objeto binding que describe el value, argument y los modifiers pasados en el template. Es la vía de escape para los casos raros en que un enlace declarativo del template no alcanza, como medir el tamaño de un elemento o conectar un event listener crudo.
<!-- main.js -->
app.directive('highlight', {
mounted(el, binding) {
el.style.background = binding.value;
},
updated(el, binding) {
el.style.background = binding.value;
},
});
<!-- anywhere in a template -->
<div v-highlight="'#42b883'">Styled via directive</div>
Registro global vs local
app.directive('name', {...}) registra una directiva globalmente para toda la app, igual que app.component. Para una directiva que solo un componente necesita, agrega en su lugar una opción directives: { name: {...} } a ese componente — mismos hooks, pero con alcance local.