Directivas personalizadas de Vue3

Además de las directivas centrales predeterminadas (v-model y v-show), Vue también permite registrar directivas personalizadas.

A continuación registramos una directiva global v-focus, cuya función es que el elemento obtenga el foco al cargar la página:

Ejemplo

<div id="app"> <p>Cuando la página se carga, el elemento input obtiene el foco automáticamente:</p> <input v-focus> </div> <script>const app = Vue.createApp({}) // Registrar una directiva personalizada global `v-focus` app.directive('focus', { // Cuando el elemento vinculado se monta en el DOM... mounted(el) { // Enfocar el elemento el.focus() } }) app.mount('#app')</script>

Pruébalo »

También podemos usar la opción directives en la instancia para registrar directivas locales, de modo que la directiva solo se pueda usar en esta instancia:

Ejemplo

<div id="app"> <p>Cuando la página se carga, el elemento input obtiene el foco automáticamente:</p> <input v-focus> </div> <script>const app = { data() { return { } }, directives: { focus: { // Definición de la directiva mounted(el) { el.focus() } } } } Vue.createApp(app).mount('#app')

Pruébalo »

Ganchos

Funciones de gancho

La función de definición de directiva proporciona varias funciones de gancho (opcionales):

  • created : Se llama antes de que se apliquen los atributos o los escuchadores de eventos del elemento enlazado.

  • beforeMount : Se llama la primera vez que la directiva se enlaza al elemento y antes de montar el componente padre.

  • mounted : Se llama después de que el componente padre del elemento enlazado se haya montado.

  • beforeUpdate: Se llama antes de actualizar el VNode del componente contenedor.

  • updated: Se llama después de que el VNode del componente contenedor y los VNode de sus componentes secundarios se hayan actualizado.

  • beforeUnmount: Se llama solo una vez, antes de que el componente padre del elemento enlazado se desmonte.

  • unmounted: Se llama solo una vez, cuando la directiva se desvincula del elemento y el componente padre se ha desmontado.

Ejemplo

import { createApp } from 'vue' const app = createApp({}) //Registro app.directive('my-directive', { //Las directivas tienen un conjunto de ganchos de ciclo de vida: //Se llama antes de que se apliquen los atributos o los escuchadores de eventos del elemento enlazado. created() {}, //Se llama antes de que el componente padre del elemento enlazado se monte. beforeMount() {}, //Se llama cuando el componente padre del elemento enlazado se monta. mounted() {}, //Se llama antes de que se actualice el VNode del componente contenedor. beforeUpdate() {}, //Se llama después de que se actualicen el VNode del componente contenedor y los VNode de sus componentes secundarios. updated() {}, //Se llama antes de que el componente padre del elemento enlazado se desmonte. beforeUnmount() {}, //Se llama cuando se desmonta el componente padre del elemento enlazado. unmounted() {} }) //Registro (directiva funcional) app.directive('my-directive', () => { //Esto se invocará como `mounted` y `updated`. }) //getter, si se ha registrado, devuelve la definición de la directiva. const myDirective = app.directive('my-directive')

Parámetros de las funciones de gancho

Los parámetros de las funciones de gancho son:

el

elEl elemento al que está vinculada la directiva. Esto se puede usar para manipular directamente el DOM.

binding

binding es un objeto que contiene las siguientes propiedades:

  • instance: La instancia del componente que usa la directiva.
  • value: El valor pasado a la directiva. Por ejemplo, env-my-directive="1 + 1"en ..., el valor es2。
  • oldValue: El valor anterior, solo disponible enbeforeUpdateyupdatedestá disponible en .... Está disponible tanto si el valor ha cambiado como si no.
  • arg: El argumento pasado a la directiva (si lo hay). Por ejemplo, env-my-directive:fooen ..., arg es"foo"。
  • modifiers: El objeto que contiene los modificadores (si los hay). Por ejemplo, env-my-directive.foo.baren ..., el objeto de modificadores es{foo: true，bar: true}。
  • dir: Un objeto que se pasa como argumento al registrar la directiva. Por ejemplo, en la siguiente directiva:
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir será el siguiente objeto:

{
  mounted(el) {
    el.focus()
  }
}

vnode

Un plano del elemento DOM real recibido como parámetro `el`.

prevNode

El nodo virtual anterior, solo disponible en los ganchos `beforeUpdate` y `updated`.

El siguiente ejemplo demuestra el uso de estos parámetros:

Ejemplo

<div id="app"> <div v-ejemplo="{ name: 'Tutorial para novatos', url: 'www.example.com' }"></div> </div> ​ <script>const app = Vue.createApp({}) app.directive('ejemplo', (el, binding, vnode) => { console.log(binding.value.name) // => "Tutorial para novatos" console.log(binding.value.url) // => "www.example.com" var s = JSON.stringify el.innerHTML = s(binding.value) }) app.mount('#app')</script>

Pruébalo »

A veces no necesitamos otras funciones de gancho, podemos abreviar la función de la siguiente manera:

Vue.directive('ejemplo', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

La función de directiva puede aceptar todas las expresiones válidas de JavaScript; el siguiente ejemplo pasa un objeto de JavaScript:

Ejemplo

<div id="app"> <div v-ejemplo="{ color: 'green', text: '¡Tutorial para novatos!' }"></div> </div> <script>Vue.directive('ejemplo', function (el, binding) { // Forma abreviada de establecer el texto y el color de fondo el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' })</script>

Pruébalo »
Otras extensiones