A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Slots

16/23
Recursos

Aportes 8

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Slot.

los slots sirven para aprovechar la sintaxis de HTML y utilizar nuestros componentes. As铆 como en HTML donde no todas las etiquetas son de contenido, si no que tambi茅n existen etiquetas contenedoras. En Vue podemos crear nuestros componentes que actuar谩n como contenedores como el siguiente:

  app.component('v-layout', {
      template: `<header> 
                    <slot name="header"></slot>
                </header>
                <div>
                  <slot name="contenido"> </slot>
                </div>`
    });

Este componente tiene por nombre v-layout por convenci贸n los componentes comenzar谩n con v- entonces notamos varias cosas:

  • <slot></slot> la etiqueta slot le indica Vue que el componente espera tener otras etiquetas o componentes como hijos. Si colocamos algo entre las etiquetas estaremos d谩ndole un valor por defecto.

  • name="" Sin embargo cuando utilicemos nuestro componente contenedor, Vue no sabr谩 por si solo el lugar que le corresponde a los hijos o hijo del componente, name puede tomar el valor que queramos pero se recomienda algo que tenga relaci贸n con lo que maquetamos y por lo tanto representa, este name le da un nombre al lugar que le corresponde a un hijo.

Finalmente cuando tenemos nuestro componente contenedor es hora de usarlo, de la siguiente manera:

const app = Vue.createApp({
      template: `<div>
                  <v-layout>
                    <template v-slot:header >
                        <button> titulo</button>
                    </template>
                    <template v-slot:contenido >
                        <p>bla bla </p>
                    </template>
                  </v-layout>
                </div>`
    });

En esta ocasi贸n estamos llamado a nuestro componente como <v-layout></v-layout> pues como usamos slot dentro de componente Vue ya sabe que esperamos que tenga algunos hijos. dentro de componente usamos la etiqueta <template></template> este template tiene un atributo llamado v-slot:nombre donde nombre, es valor que le pasamos al name de nuestra etiqueta slot cuando construimos el componente, debido a esto ahora Vue sabe donde debe colocar cada hijo del componente.

Crear componentes contenedores tiene sus ventajas, estos nos ayudan a maquetar mejor los estilos, pues podemos configurarlos para que usen las reglas CSS de los contenedores, como lo es flexbox o ``grid` permiti茅ndonos tener componentes reutilizables con un layout ya definido

Para ello solo har铆a falta darle sus estilos al componente contenedor como cualquier otra etiqueta contenedora de HTML.

En vue2, esta parte no era tan explicita, ahora se parece un poco m谩s a react, gustandome mas vue js

Forma de agregar varios componentes:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

S贸lo una observaci贸n: template y slot no son componentes creador para Vue. Son tags de HTML. Ambos vienen desde la creaci贸n de Web Components, pueden ver la documentaci贸n de esto ac谩:

The Content Template element
The Web Component Slot element

Mi aporte como siempre al gist, creo que es mala pr谩ctica subirlo ah铆, pero se facilita para consulta r谩pida, el c贸digo sigue con el ejemplo de los post

16Slots.htnl

Comparto mi c贸digo con slots鈥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <v-layout>
            <template v-slot:header></template>
            <template v-slot:main>                
                <button>Enviar</button>
            </template>
            <template v-slot:footer>
                <p>V铆sitanos en redes sociales</p>
            </template>
            
        </v-layout>
    </div>
    
    <!-- Usando Vue a partir de un CDN -->
    <script src="https://unpkg.com/[email protected]"></script>

    <script>
        const app = Vue.createApp({            

        })
        app.component("v-layout", {
            data() {
                return {
                    text: "T铆tulo por defecto",
                }
            },
            template: `
                <header>
                    <slot name="header">{{ text }}</slot>
                </header>
                <main>
                    <slot name="main"></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            `
        });

        const vm = app.mount("#app");
    </script>


</body>
</html>

Cuando se tiene un slot lo que se est谩 diciendo es que en ese punto vas a colocar contenido desde fuera.

Tambi茅n existe la opci贸n de colocar alg煤n valor predeterminado al slot en caso de que no se use el slot

<header>
  <slot>T铆tulo principal</slot>
</header>
<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
        <h1>{{message}}</h1>
        <div>
            <v-layout>
                <template v-slot:header>
                    <button>
                        titulo
                    </button>
                </template>
                <template v-slot:content>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </template>
            </v-layout>
            
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hola Vue!'
                }
            },
        })


        app.component('v-layout', {
            template: `
            <header>
                <slot name='header'></slot>
            </header>
            <div>
                <slot name='content'></slot>
            </div>
            `
        })

        const vm = app.mount('#app')
    </script>