Compartir las funcionalidades

1. Definición

Los slots permiten inyectar contenido en el template de un componente desde el componente padre. Esto puede resultar útil cuando desee crear componentes genéricos con su propia lógica, cuyo template tendrá un contenido diferente en función del lugar de la aplicación donde se utilicen.

En el template del componente padre, inyectamos un contenido del componente hijo como este:

<mi-componente> 
  Texto inyectado en el componente 
</mi-componente> 

Y en el template del componente hijo, usamos el elemento <slot> para designar la ubicación del contenido inyectado:

Vue.component('mi-componente', { 
  template: ` 
    <div> 
      <slot><slot> 
    </div> 
` 
}); 

Tomemos el ejemplo de un banner que muestra un mensaje de error. También se incluirá un botón para cerrarlo.

Usamos el estilo de alertas del framework CSS Bootstrap 4. Agregue esta hoja de estilo a su proyecto:

body { 
    font-family: BlinkMacSystemFont; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: 1.5; 
    color: #212529; 
    text-align: left; 
} 
 
.alert { 
    position: relative; 
    top: 0; 
    z-index: 2; 
    padding: .75rem 1.25rem; 
    margin-bottom: 1rem; 
    color: #721c24; 
    background-color: #f8d7da; 
    border-color: #f5c6cb; 
    border: 1px solid transparent; 
    border-radius: .25rem; 
} 
 
.close { 
    float: right; 
    font-size: 1.5rem; 
    font-weight: 700; 
    line-height: 1; ...

1. Definición

Otra forma muy práctica de compartir procesos es utilizar componentes sin renderizado (renderless components en inglés), es decir, componentes sin template, que únicamente se encargan de ejecutar procesos de negocio y, a continuación, de poner los resultados a disposición de los componentes hijo a través de su propiedad de instancia $scopedSlots. Esto permite aislar procesos genéricos y poder utilizarlos como cualquier otro componente en el template del componente padre.

Vue.components('composant-funcional', { 
  data() { 
    return { 
      resultado: "" 
    } 
  }, 
  mounted() { 
    procesar(); 
  }, 
  methods: { 
    procesar() { 
      // proceso de negocio a ejecutar 
      this.resultado = "terminado"; 
    } 
  } 
  render() { 
    return $this.scopedSlot.default({ 
      data: this.resultado; 
    }); 
  } 
}); 

Aquí ejecutamos un procesamiento una vez que el componente está montado y asignamos el resultado al slot predeterminado de la instancia en la función render(). 

En la sección anterior vimos que la propiedad this.$ScopedSlots representa el conjunto de slots con nombre, así como el espacio predeterminado del template.

En el ejemplo anterior, la función render()

render() { 
  return $this.scopedSlot.default({ 
    miResultat: this.resultado; 
  }); 
} 

es equivalente al template siguiente:

<slot:miResultado="resultado"></slot> 

Por lo tanto, podemos usar nuestro componente en el template de un componente padre y usar el resultado de nuestro procesamiento de negocio, con sus componentes hijo.

<composant-funcional> 
  <template #default="{ miResultado }"> 
    {{...

1. Definición

Vue.js también ofrece mixins, que es otro sistema para encapsular procesos de negocio reutilizables en múltiples instancias de Vue. Un mixin es un objeto que puede encapsular las diferentes opciones de un componente. Al renderizar, todas las opciones del mixin se fusionarán con las opciones del componente.

Cuando el código se repite en varios componentes, se puede compartir en un mixin.

Para crear un mixin, todo lo que tenemos que hacer es declarar un objeto JavaScript con las opciones de la instancia que queremos sobrecargar.

let maMixin = { 
  data() { 
    return { 
      persona: { 
        nombre: "Franck", 
        edad: 32 
      } 
    } 
  }, 
  methods: { 
    log() { 
      console.log("componente via mixin creado"); 
    } 
  }, 
  created() { 
    console.log(`Hola ${this. persona.nombre} - 
${this. persona.edad} años`); 
    this.log(); 
  }, 
} 

Para utilizar el código mixin en nuestro componente, usamos la opción mixins, que recibe como...

1. Definición

Desarrollar un plugin es otra forma de compartir funcionalidades con un ámbito global en una aplicación. Concretamente, los plugins nos permiten desarrollar librerías de terceros compatibles con Vue.js.

Hay plugins oficiales, como Vue-Router o Vuex, que veremos más adelante y varios cientos de plugins para diversas necesidades, desarrollados por la comunidad de desarrolladores de Vue.js.

Una lista de los mejores plugins está disponible en el repositorio Awesome-Vue, junto con muchos otros recursos sobre Vue.js:

https://github.com/vuejs/awesome-vue

También encontrará muchos plugins en https://vuejsexamples.com/

Este repositorio también incluye otros recursos, como proyectos de ejemplo, tutoriales, podcasts, etc.

Los plugins también son una buena forma de conectar librerías de terceros escritas en JavaScript y Vue.js. El plugin incorpora todos los mecanismos para hacer que la librería sea reactiva.

De manera concreta, un plugin es un archivo JavaScript donde exponemos un método install, que recibe como primer argumento el constructor Vue y, como segundo argumento, un objeto opcional options si necesita usar propiedades y métodos definidos anteriormente en su código:

MiPlugin.install = function (Vue, options) { 
  // código del plugin 
}; 

o si usa un empaquetador de módulos como Webpack:

/* archivio miPlugin.js */ 
 
export default { 
  install (Vue, options) { 
    // código del plugin 
  } 
} 

Seguidamente se utiliza con el método Vue.use():

Vue.use(MiPlugin, { opcion1: true }); 

No olvide importar el módulo, si está utilizando un empaquetador de módulos:

import MiPlugin from "../ruta/miPlugin.js" 
 
Vue.use(MiPlugin, { opcion1: true }); 

Los plugins ofrecen varias posibilidades:

MiPlugin.install = function (Vue, options) { 
 
  Vue.miPropGlobal = "Hola"; 
  Vue.miMetodoGlobal = () => console.log('método global'); 
}; 

MiPlugin.install...

1. Definición

En el capítulo Entender los fundamentos de Vue.js, vimos las diferentes directivas v-bind, v-for, v-if, v-on, v-model, etc. y las funcionalidades que aportan.

Una directiva no es más que un atributo que permite realizar cambios en el DOM de la página.

Si desea incorporar otras funcionalidades a sus templates, es posible crear sus propias directivas declaradas globalmente, con el método directive del objeto Vue. Tome como primer parámetro el nombre de la directiva y, como segundo, una función de actualización o un objeto con diferentes hooks:

Vue.directive('mi-directiva', function(element) { 
  // manipulación del elemento 
}); 

Vue.directive('mi-directiva', { 
  // hooks 
}); 

También puede declarar su directiva localmente en un componente con la opción directive: 

Vue.component('mi-componente', { 
  directives: { 
    'mi-directiva': { 
      // hooks 
    } 
  } 
}); 

A continuación, la directiva personalizada se usa en el template como un atributo de un elemento con el prefijo "v-":

<div v-mi-directiva></div> 

Al igual que las directivas que hemos visto hasta ahora, podemos definir argumentos y modificadores, y pasarles una expresión JavaScript.

<div v-mi-directiva:argument.modificador="enviar()"></div> 

Se trata de hooks del ciclo de vida del elemento sobre el que se posiciona la directiva. Reciben como valor una función que se ejecuta cuando ocurre el evento del ciclo...