1. Reenviar todos los accesorios de un componente primario a un componente secundario

Si eres un desarrollador de Vue.js, en algún momento seguramente escribirás un componente que simplemente está "envuelto" alrededor de otro componente. Un llamado componente de envoltura a menudo aceptará todos los accesorios que el componente que envuelve también acepta. Entonces querrás "reenviar" esos accesorios al componente envuelto. En lugar de hacer esto:
simplemente puede reenviar todos los accesorios del componente envoltorio a la vez haciendo esto:

2. Asegurarse de que dos componentes acepten los mismos accesorios

Este truco se puede combinar poderosamente con el Truco # 1. Ahora que se sabe cómo reenviar todos los accesorios a un componente envuelto, uno podría preguntarse cómo asegurarse de que el componente envoltorio acepte los mismos accesorios que el componente envuelto en primer lugar. En el componente envoltorio, uno probablemente escribiría algo como esto:
Esto tiene algunas desventajas. Una de ellas es que, si reescribe ChildComponent y tal vez agrega algunos accesorios nuevos, también tendrá que hacer cambios en el componente contenedor. Otra desventaja es la duplicación de código y, en general, la mala estética del código. Afortunadamente, hay una solución muy simple para este problema:

3. Reenviar todos los oyentes de eventos de un componente primario a un componente secundario

No es necesario que haga esto si el componente secundario al que desea pasar los oyentes de eventos está en la raíz del componente primario, ya que entonces obtiene todos los oyentes por defecto. Sin embargo, si ese no es el caso, como en el siguiente ejemplo, puede hacer esto:

4. Hermosa sintaxis de tragamonedas

Desde Vue 2.6, hay una abreviatura para los nombres de las ranuras, al igual que para los eventos, por ejemplo, en @clicklugar de v-on:click`. Si tiene un <my-table>componente que tiene un slot llamado row, que tiene un slot-prop llamado item, ahora puede pasarle una plantilla y acceder al itemprop de esta manera:

5. Argumentos de directivas dinámicas

Esta podría ser la característica más impresionante y poderosa que ofrece Vue 2.6: pasar dinámicamente argumentos directivos a un componente. Supongamos que tiene un <my-button>componente. Por alguna razón, a veces quieres escuchar un clickevento en él, pero otras veces quieres escucharlo dblclick. Podrías resolver eso usando directivas dinámicas como esta:
Proporcionar oyentes de eventos dinámicamente es solo una de las muchas cosas que puede hacer con esto: ¡puede aplicar el mismo patrón a atributos HTML dinámicos, accesorios y mucho más!

6. Imagen dinámica src

Un caso de uso frecuente de esto es cuando necesita mostrar una imagen almacenada localmente cuya ruta se almacena en alguna variable o propiedad de algún objeto. Si bien hay varias soluciones para esto, la que prefiero es usar la require función de webpack . Suponga que en sus componentes Vue datatiene un objeto que se ve así:
La ruta de la imagen que desea mostrar se almacena en la logopropiedad del companyobjeto. En este ejemplo, asumiremos que todas sus imágenes de su proyecto están src/assets, que es donde se recomienda que coloque sus imágenes de todos modos. También hay una subcarpeta llamada logos, que contiene un montón de imágenes de logotipos. Por lo que la ruta completa de la imagen, en este caso sería: src/assets/logos/cashmoneylogo.png.
Por lo tanto, en el <template>de su componente, crearía una <img> etiqueta y proporcionaría el atributo src dinámicamente:
Algunas cosas a considerar aquí:
  • La ruta de la cadena pasada a la requirefunción es una cadena de plantilla ES6 con backticks (`...`). De esta manera, puede colocar una variable de manera ordenada usando en ${...}lugar de concatenando usando el +operador.
  • La requirefunción será no trabajar con un camino que es puramente dinámica , como webpack necesita saber qué archivos para empaquetar ya en tiempo de compilación. Debe proporcionar una expresión de ruta parcialmente estática. Webpack luego agrupará todos los archivos que potencialmente coincidan con esa expresión *. Es por eso que la @/assets/logosparte está codificada en nuestro ejemplo. Por cierto, el @ esencialmente significa "relativo a la srccarpeta". Puede usarlo sin importar dónde esté el archivo que está escribiendo y recomiendo encarecidamente usarlo en lugar de declarar caminos feos en forma relativa como ./../../../. Otra ventaja: si luego decide mover su archivo a otro lugar, la ruta @que siga usando seguirá siendo válida.
* Nota: Esto podría afectar el rendimiento si hay muchos archivos que coinciden con la expresión de ruta que proporcionó. Si ese es el caso, asegúrese de que su expresión de ruta esté lo más definida posible o busque las posibles optimizaciones que ofrece Webpack.