Usando ranuras en Vue.js

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • SmashingConf Friburgo 2024

  • Índice
    1. ¿Qué son las tragamonedas?
      1. Ranuras múltiples/con nombre
      2. Ranuras con alcance
    2. ¿Qué se puede hacer con las tragamonedas?
      1. Patrones reutilizables
      2. Funcionalidad de reutilización
      3. Componentes sin renderizado
    3. Estoy fuera

    Las ranuras son una herramienta poderosa para crear componentes reutilizables en Vue.js, aunque no son la característica más sencilla de entender. Echemos un vistazo a cómo usar las ranuras y algunos ejemplos de cómo se pueden usar en sus aplicaciones Vue.

     

    Con el reciente lanzamiento de Vue 2.6, la sintaxis para usar ranuras se ha vuelto más concisa. Este cambio a las ranuras me ha vuelto a interesar en descubrir el poder potencial de las ranuras para brindar reutilización, nuevas funciones y una legibilidad más clara a nuestros proyectos basados ​​en Vue. ¿De qué son realmente capaces las tragamonedas?

    Si eres nuevo en Vue o no has visto los cambios desde la versión 2.6, sigue leyendo. Probablemente el mejor recurso para aprender sobre las tragamonedas sea la propia documentación de Vue , pero intentaré dar un resumen aquí.

    ¿Qué son las tragamonedas?

    Las ranuras son un mecanismo para los componentes de Vue que le permite componer sus componentes de una manera distinta a la estricta relación padre-hijo. Las tragamonedas le brindan una salida para colocar contenido en lugares nuevos o hacer que los componentes sean más genéricos. La mejor manera de entenderlos es verlos en acción. Comencemos con un ejemplo simple:

     

    // frame.vuetemplate div slot/slot /div/template

    Este componente tiene un envoltorio div. Supongamos que divestá ahí para crear un marco estilístico alrededor de su contenido. Este componente se puede utilizar genéricamente para envolver un marco alrededor de cualquier contenido que desee. Veamos cómo se ve al usarlo. El framecomponente aquí se refiere al componente que acabamos de crear arriba.

    // app.vuetemplate frameimg src="an-image.jpg"/frame/template

    El contenido que se encuentra entre las frameetiquetas de apertura y cierre se insertará en el framecomponente donde se slotencuentra, reemplazando las slotetiquetas. Esta es la forma más básica de hacerlo. También puede especificar contenido predeterminado para colocar en un espacio simplemente llenándolo:

    // frame.vuetemplate div slotThis is the default content if nothing gets specified to go here/slot /div/template

    Ahora si lo usamos así:

    // app.vuetemplate frame //template

    Aparecerá el texto predeterminado de "Este es el contenido predeterminado si no se especifica nada para ir aquí", pero si lo usamos como lo hicimos antes, la etiqueta anulará el texto predeterminado img.

    Ranuras múltiples/con nombre

    Puede agregar varias ranuras a un componente, pero si lo hace, todas menos una deben tener un nombre. Si hay alguno sin nombre, es el slot predeterminado. Así es como se crean múltiples espacios:

    // titled-frame.vuetemplate div headerh2slot name="header"Title/slot/h2/header slotThis is the default content if nothing gets specified to go here/slot /div/template

    Mantuvimos el mismo espacio predeterminado, pero esta vez agregamos un espacio con nombre headerdonde puedes ingresar un título. Lo usas así:

    // app.vuetemplate titled-frame template v-slot:header !-- The code below goes into the header slot -- My Image’s Title /template !-- The code below goes into the default slot -- img src="an-image.jpg" /titled-frame/template

    Al igual que antes, si queremos agregar contenido a la ranura predeterminada, simplemente colóquelo directamente dentro del titled-framecomponente. Sin embargo, para agregar contenido a una ranura con nombre, necesitábamos envolver el código en una templateetiqueta con una v-slotdirectiva. Agrega dos puntos ( :) después v-sloty luego escribe el nombre de la ranura a la que desea que se pase el contenido. Tenga en cuenta que esto v-slotes nuevo en Vue 2.6, por lo que si está utilizando una versión anterior, deberá leer los documentos sobre la sintaxis de ranuras obsoleta .

     

    Ranuras con alcance

    Una cosa más que necesitarás saber es que las tragamonedas pueden pasar datos/funciones a sus hijos. Para demostrar esto, necesitaremos un componente de ejemplo completamente diferente con ranuras, uno que sea incluso más elaborado que el anterior: copiemos el ejemplo de los documentos creando un componente que proporcione los datos sobre el usuario actual a sus ranuras:

    // current-user.vuetemplate span slot v-bind:user="user" {{ user.lastName }} /slot /span/templatescriptexport default { data () { return { user: ... } }}/script

    Este componente tiene una propiedad llamada usercon detalles sobre el usuario. De forma predeterminada, el componente muestra el apellido del usuario, pero tenga en cuenta que se utiliza v-bindpara vincular los datos del usuario a la ranura. Con eso, podemos usar este componente para proporcionar los datos del usuario a su descendiente:

    // app.vuetemplate current-user template v-slot:default="slotProps"{{ slotProps.user.firstName }}/template /current-user/template

    Para obtener acceso a los datos pasados ​​a la ranura, especificamos el nombre de la variable de alcance con el valor de la v-slotdirectiva.

    Hay algunas notas para tomar aquí:

    • Especificamos el nombre de default, aunque no es necesario para la ranura predeterminada. En su lugar, podríamos simplemente usar v-slot="slotProps".
    • No es necesario utilizarlo slotPropscomo nombre. Puedes llamarlo como quieras.
    • Si solo estás usando una ranura predeterminada, puedes omitir esa templateetiqueta interna y poner la v-slotdirectiva directamente en la current-useretiqueta.
    • Puede utilizar la desestructuración de objetos para crear referencias directas a los datos de la ranura con ámbito en lugar de utilizar un único nombre de variable. En otras palabras, puedes usar v-slot="{user}"en lugar de v-slot="slotProps"y luego puedes usar userdirectamente en lugar de slotProps.user.

    Teniendo en cuenta esas notas, el ejemplo anterior se puede reescribir así:

    // app.vuetemplate current-user v-slot="{user}" {{ user.firstName }} /current-user/template

    Un par de cosas más a tener en cuenta:

    • Puede vincular más de un valor con v-binddirectivas. Entonces, en el ejemplo, podría haber hecho más que solo user.
    • También puede pasar funciones a ranuras con alcance. Muchas bibliotecas usan esto para proporcionar componentes funcionales reutilizables, como verá más adelante.
    • v-slottiene un alias de #. Entonces, en lugar de escribir v-slot:header="data", puedes escribir #header="data". También puede simplemente especificar #headeren lugar de v-slot:headercuándo no está utilizando ranuras con alcance. En cuanto a las ranuras predeterminadas, deberá especificar el nombre defaultcuando utilice el alias. En otras palabras, necesitarás escribir #default="data"en lugar de #="data".

    Hay algunos puntos menores más que puede aprender en los documentos , pero eso debería ser suficiente para ayudarlo a comprender de qué estamos hablando en el resto de este artículo.

     

    ¿Qué se puede hacer con las tragamonedas?

    Las tragamonedas no fueron creadas para un solo propósito, o al menos si lo fueran, han evolucionado mucho más allá de esa intención original para convertirse en una poderosa herramienta para hacer muchas cosas diferentes.

    Patrones reutilizables

    Los componentes siempre se diseñaron para poder reutilizarse, pero algunos patrones no son prácticos de implementar con un solo componente "normal" porque la cantidad que propsnecesitarás para personalizarlo puede ser excesiva o tendrías que pasar grandes secciones de contenido y potencialmente otros componentes a través del props. Las ranuras se pueden usar para abarcar la parte "exterior" del patrón y permitir que otros HTML y/o componentes se coloquen dentro de ellos para personalizar la parte "interior", permitiendo que el componente con ranuras defina el patrón y los componentes inyectados en el patrón. Las tragamonedas son únicas.

    Para nuestro primer ejemplo, comencemos con algo simple: un botón. Imagine que usted y su equipo están usando Bootstrap *. Con Bootstrap, sus botones a menudo están vinculados con la clase base `btn` y una clase que especifica el color, como `btn-primary`. También puedes agregar una clase de tamaño, como `btn-lg`. Fotos Porno y actrices porno

    * Ni te animo ni te desaliento a hacer esto, solo necesitaba algo para mi ejemplo y es bastante conocido.

    Supongamos ahora, en aras de la simplicidad, que su aplicación/sitio siempre usa btn-primaryy btn-lg. No querrás tener que escribir siempre las tres clases en tus botones, o tal vez no confíes en que un novato recuerde hacer las tres. En ese caso, puede crear un componente que tenga automáticamente esas tres clases, pero ¿cómo permite la personalización del contenido? A propno es práctico porque buttonse permite que una etiqueta contenga todo tipo de HTML, por lo que deberíamos usar una ranura.

    !-- my-button.vue --template button slotClick Me!/slot /button/template

    Ahora podemos usarlo en todas partes con el contenido que quieras:

    !-- somewhere else, using my-button.vue --template my-button img src="/img/awesome-icon.jpg" SMASH THIS BUTTON TO BECOME AWESOME FOR ONLY $500!!! /my-button/template

    Por supuesto, puedes optar por algo mucho más grande que un botón. Siguiendo con Bootstrap, veamos una parte modal, o al menos HTML; No entraré en funcionalidad… todavía.

    !-- my-modal.vue --templatediv tabindex="-1" role="dialog" div role="document" div div slot name="header"/slot button type="button" data-dismiss="modal" aria-label="Close" span aria-hidden="true"×/span /button /div div slot name="body"/slot /div div slot name="footer"/slot /div /div /div/div/template

    Ahora, usemos esto:

    !-- somewhere else, using my-modal.vue --template my-modal template #header!-- using the shorthand for `v-slot` -- h5Awesome Interruption!/h5 /template template #body pWe interrupt your use of our application to let you know that this application is awesome and you should continue using it every day for the rest of your life!/p /template template #footer emNow back to your regularly scheduled app usage/em /template /my-modal/template

    El tipo de caso de uso anterior para las tragamonedas es obviamente muy útil, pero puede hacer aún más.

     

    Funcionalidad de reutilización

    Los componentes de Vue no se tratan solo de HTML y CSS. Están construidos con JavaScript, por lo que también tienen que ver con la funcionalidad. Las ranuras pueden resultar útiles para crear funciones una vez y utilizarlas en varios lugares. Volvamos a nuestro ejemplo modal y agreguemos una función que cierre el modal:

    !-- my-modal.vue --templatediv tabindex="-1" role="dialog" div role="document" div div slot name="header"/slot button type="button" data-dismiss="modal" aria-label="Close" span aria-hidden="true"×/span /button /div div slot name="body"/slot /div div !-- using `v-bind` shorthand to pass the `closeModal` method to the component that will be in this slot -- slot name="footer" :closeModal="closeModal"/slot /div /div /div/div/templatescriptexport default { //... methods: { closeModal () { // Do what needs to be done to close the modal... and maybe remove it from the DOM } }}/script

    Ahora, cuando use este componente, puede agregar un botón al pie de página que puede cerrar el modal. Normalmente, en el caso de un modal Bootstrap, podría simplemente agregarlo data-dismiss="modal"a un botón, pero queremos ocultar cosas específicas de Bootstrap lejos de los componentes que se ubicarán en este componente modal. Entonces les pasamos una función que pueden llamar y no se dan cuenta de la participación de Bootstrap:

    !-- somewhere else, using my-modal.vue --template my-modal template #header!-- using the shorthand for `v-slot` -- h5Awesome Interruption!/h5 /template template #body pWe interrupt your use of our application to let you know that this application is awesome and you should continue using it every day for the rest of your life!/p /template !-- pull in `closeModal` and use it in a button’s click handler -- template #footer="{closeModal}" button @click="closeModal" Take me back to the app so I can be awesome /button /template /my-modal/template

    Componentes sin renderizado

    Y finalmente, puede tomar lo que sabe sobre el uso de ranuras para pasar la funcionalidad reutilizable y eliminar prácticamente todo el HTML y simplemente usar las ranuras. Eso es esencialmente lo que es un componente sin renderizado: un componente que proporciona solo funcionalidad sin HTML.

    Hacer que los componentes sean verdaderamente sin renderización puede ser un poco complicado porque necesitarás escribir renderfunciones en lugar de usar una plantilla para eliminar la necesidad de un elemento raíz, pero puede que no siempre sea necesario. Sin embargo, echemos un vistazo a un ejemplo simple que nos permite usar una plantilla primero:

     

    template transition name="fade" v-bind="$attrs" v-on="$listeners" slot/slot /transition/templatestyle.fade-enter-active,.fade-leave-active { transition: opacity 0.3s;}.fade-enter, .fade-leave-to { opacity: 0;}/style

    Este es un ejemplo extraño de un componente sin renderizado porque ni siquiera tiene JavaScript. Esto se debe principalmente a que simplemente estamos creando una versión reutilizable preconfigurada de una función sin renderizado incorporada: transition.

    Sí, Vue tiene componentes sin renderizado integrados. Este ejemplo en particular está tomado de un artículo sobre transiciones reutilizables de Cristi Jora y muestra una forma sencilla de crear un componente sin renderizado que puede estandarizar las transiciones utilizadas en toda su aplicación. El artículo de Cristi profundiza mucho más y muestra algunas variaciones más avanzadas de transiciones reutilizables, por lo que recomiendo consultarlo.

    Para nuestro otro ejemplo, crearemos un componente que maneje cambiar lo que se muestra durante los diferentes estados de una Promesa: pendiente, resuelto exitosamente y fallido. Es un patrón común y, si bien no requiere mucho código, puede confundir muchos de sus componentes si no se extrae la lógica para su reutilización.

    !-- promised.vue --template span slot name="rejected" v-if="error" :error="error"/slot slot name="resolved" v-else-if="resolved" :data="data"/slot slot name="pending" v-else/slot /span/templatescriptexport default { props: { promise: Promise }, data: () = ({ resolved: false, data: null, error: null }), watch: { promise: { handler (promise) { this.resolved = false this.error = null if (!promise) { this.data = null return } promise.then(data = { this.data = data this.resolved = true }) .catch(err = { this.error = err this.resolved = true }) }, immediate: true } }}/script

    Entonces, ¿qué está pasando aquí? Primero, tenga en cuenta que estamos recibiendo un accesorio promisellamado Promise. En la watchsección observamos los cambios en la promesa y cuando cambia (o inmediatamente después de la creación del componente gracias a la immediatepropiedad) limpiamos el estado y llamamos thena catchla promesa, actualizando el estado cuando finaliza con éxito o falla.

    Luego, en la plantilla, mostramos un espacio diferente según el estado. Tenga en cuenta que no pudimos mantenerlo realmente sin renderizado porque necesitábamos un elemento raíz para poder usar una plantilla. Estamos pasando datatambién errora los ámbitos de tragamonedas relevantes.

    Y aquí hay un ejemplo de su uso:

    template div promised :promise="somePromise" template #resolved="{ data }" Resolved: {{ data }} /template template #rejected="{ error }" Rejected: {{ error }} /template template #pending Working on it... /template /promised /div/template...

    Pasamos somePromiseal componente sin renderizado. Mientras esperamos que termine, mostramos "Trabajando en ello..." gracias a la pendingranura. Si tiene éxito, mostramos "Resuelto:" y el valor de resolución. Si falla mostramos "Rechazado:" y el error que provocó el rechazo. Ahora ya no necesitamos rastrear el estado de la promesa dentro de este componente porque esa parte se extrae en su propio componente reutilizable.

    Entonces, ¿qué podemos hacer con ese spanenvoltorio alrededor de las ranuras promised.vue? Para eliminarlo, necesitaremos eliminar la templateporción y agregar una renderfunción a nuestro componente:

    render () { if (this.error) { return this.$scopedSlots['rejected']({error: this.error}) } if (this.resolved) { return this.$scopedSlots['resolved']({data: this.data}) } return this.$scopedSlots['pending']()}

    No está sucediendo nada demasiado complicado aquí. Solo usamos algunos ifbloques para encontrar el estado y luego devolvemos la ranura de alcance correcta (a través de this.$scopedSlots['SLOTNAME'](...)) y pasamos los datos relevantes al alcance de la ranura. Cuando no esté utilizando una plantilla, puede omitir el uso de la .vueextensión de archivo sacando el JavaScript de la scriptetiqueta y simplemente introduciéndolo en un .jsarchivo. Esto debería darle un ligero aumento en el rendimiento al compilar esos archivos Vue.

    Este ejemplo es una versión simplificada y ligeramente modificada de vue-promised , que recomendaría en lugar del ejemplo anterior porque cubre algunos errores potenciales. También existen muchos otros excelentes ejemplos de componentes sin renderizado. Baleada es una biblioteca completa llena de componentes sin renderizado que brindan funciones útiles como esta. También existe vue-virtual-scroller para controlar la representación de elementos de la lista en función de lo que se ve en la pantalla o PortalVue para "teletransportar" contenido a partes completamente diferentes del DOM.

    Estoy fuera

    Las tragamonedas de Vue llevan el desarrollo basado en componentes a un nivel completamente nuevo y, si bien he demostrado muchas formas excelentes de utilizar las tragamonedas, hay muchas más por ahí. ¿Qué gran idea se te ocurre? ¿De qué maneras crees que las tragamonedas podrían mejorarse? Si tiene alguna, asegúrese de compartir sus ideas con el equipo de Vue. Dios los bendiga y feliz codificación.

    (dm, il)Explora más en

    • vista
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Usando ranuras en Vue.js

    Usando ranuras en Vue.js

    Ranuras múltiples/con nombreRanuras con alcancePatrones reutilizablesFuncionalidad de reutilizaciónComponentes sin renderizadoTal vez te puede interesar:Impl

    programar

    es

    https://pseint.es/static/images/programar-usando-ranuras-en-vue-988-0.jpg

    2024-05-20

     

    Usando ranuras en Vue.js
    Usando ranuras en Vue.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences