Utilizando Slots con Render Functions y JSX

Clase 8 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

Los Slots nos ayudan a crear componentes reutilizables y personalizables al mismo tiempo, nos permiten definir el contenido de nuestros componentes para evitar el trabajo de crear un nuevo archivo por cada cambio en los componentes. Son muy útiles e importantes en el mundo de Vue.js.

José Manuel Casani Guerra

student•

Recuerden , que $slots.default es muy diferente a children ..

Facundo Petre

student•

Gracias por el aporte, estaba pensando que eran muy similares

Freddy Córdova Arana

student•

Gracias por el tip 👍

Melvin Hernández

student•

Solucion En el componente ModalJsx

render() {
	return (this.show) ? <div class="modal">
		<div class="content">{this.$slots.default}</div>
	</div> : null
}

En el componente App

<modal-jsx :show="show">
	<p>hello World</p>
</modal-jsx>

Julio Hernandez Gorocica

student•

Mi solución para agregar el slot al ModalJSX, fue agregar un div en el render del componente ModalJsx.vue, me quedó de la siguiente manera:

return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandle} >Cancel</button>
      <button onClick={this.clickOkHandle}>Ok</button>
    </div> : null

Y por último, pasarle el contenido del slot desde App.vue

<modal-jsx :show="show">
     <h1>Titulo modalJsx</h1>
     <hr>
     <p> Hello world from AppVue </p>
   </modal-jsx>

Matias Jesus Ruiz Ruiz

student•

Utilizando Slots en JSX!

render() {
    return (this.show) ? <div id="modal">
      <div class="content">{this.$slots.default}</div>
      <button onClick={this.clickCancelHandler}>Cancelar</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Ignacio Giralte

student•

Hola! Tengo dudas sobre la necesidad real de incorporar funcionalidades de React a Vue, la verdad...creo que vue tiene por si mismo posibilidades de sobra para hacer cualquier cosa, estamos en 2019, pregunta: ¿Alguien sabe si JSX se utiliza en proyectos reales y qué perspectivas de crecimiento tiene actualmente en el ecosistema Vue? no he oido demasiado sobre esto últimamente...

Edward Steven Ramos Palacios

teacher•

Desde mi experiencia no conozco proyectos que usen JSX con Vue. Vue tiene todas las capacidades para crear productos de alto rendimiento y listas para producción. Por ejemplo el sitio de MTA de NY usa Vue.js en su stack. Para finalizar, según esta encuesta que muestra, entre otras cosas, lo que los developers quieren aprender, el deseo de aprender Vue.js crecio un 2X comparado con el año 2018. Asi que adelante con Vue!

Juan Castro

teacher•

Vue.js Slots - Flabio Copes
Understanding Component Slots with Vue.js - Alligator.io
The Power of Scoped Slots in Vue
Practical Use of Vue.js Scoped Slots

Juan Castro

teacher•

Vue - how to pass down slots inside wrapper component?

Alejandro González Reyes

student•

Mi aporte como colocar comentarios en JSX

render () {
        return (this.show) ? <div class="modal">
            {/* <p>{this.message}</p> */}
            {this.$slots.default}
            <button onClick={this.clickCancelHandler}>Cancel</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null
    },

`` <modal-jsx :show="show" message="Hola desde Jsx"> <h1>Modal JSX</h1> <p>Hola desde mi componente slot</p> </modal-jsx>

Jesús Miguel Quinto Teran

student•

Solución JSX:

  render() {
    return (this.show) ? <div class="modal">
      <div> {this.$slots.default} </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Como dato interesante, con {{}} no funciona, tarde algo de tiempo en comprender que el equivalente en JSX es {}.

Ludwing Juan Homero Pérez Tzaquitzal

student•

Mi código en ModalJsx.vue

return (this.show) ? <div class="modal">
                <div class="content">{this.$slots.default}</div>
                <button onClick={this.clickCancelHandler}>Cancel</button>
                <button onClick={this.clickOkHandler}>Ok</button>
            </div> : null

Y mi código en App.vue

<modal-jsx :show="show">
            <h1>Slots JSX</h1>
            <p>Hello world! con slots y jsx</p>
        </modal-jsx>

Nelson Manuel Ordaz Yglesias

student•

Los slots son secciones dentro de un componente, donde podemos cargar o reemplazar con elementos desde un elemento padre.

Definiendo slot en uncomponente:

render (createElement) {
    return (this.show) ? createElement('div', {
      class: 'modal',
    }, [
		createElement('div', {
        		class: 'content',
   	 	 }, this.$slots.default)

Cargando o reemplazando desde un elemento padre :

<modal-create-element :show="show">
	<h1>Modal title</h1>
	<p>Hello World</p>
</modal-create-element>

Deivis Ronald García Cercado

student•

La solucion con JSX: render() { return (this.show) ? <div class="modal"> <div class="content"> {this.$slots.default} </div> <div class="form"> {this.$slots.form} </div> <div class="btn"> {this.$slots.btn} </div> </div> : null },

Deivis Ronald García Cercado

student•

Lo hice de esta manera: con el createElement render(h) { return (this.show) ? h('div', { class: 'modal' }, [ h('div', { class: 'content' }, this.$slots.default), h('div', { class: 'btn' }, this.$slots.btn) // h('button', { // class: 'btn', // on: { // click: this.clickCancelar // } // }, 'Cancelar'), // h('button' , { // class: 'btn', // on: { // click: this.clickok // } // }, 'ok') ]) : null },

Carlos Eduardo Gomez García

teacher•

Dejo mi código JSX para esta clase:

return (this.show) ? <div class="modal">
            <p>{this.$slots.default}</p>
            <button onClick={this.clickCancelHandler}>Cancelar</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null

Juan Pablo Calao Pérez

student•

En App.vue:

<modal-jsx message="Hello Jsx" :show="show">
    <p>Slot JSX</p>
</modal-jsx>

En ModalJsx.vue:

<div class="modal">
    <div class="content">{this.$slots.default}</div>
    <button onClick={this.handleCancelClick}>Cancel</button>
    <button onClick={this.handleOkClick}>Ok</button>
</div>

Jorge Eliecer Rangel Jimenez

student•

ModalJsx.vue

		render() {
		return (this.show) ? <div class="modal">
			<div class="content">{this.$slots.default}
				<button onClick={this.clickCancelHandler}>Cancel</button>
				<button onClick={this.clickOkHandler}>Ok</button>
			</div>
		</div> : null
	},

Marcos Rodriguez

student•

¿Que son los Slots?

Jesús Miguel Quinto Teran

student•

Un Slot es una funcionalidad de Vuejs que te permite pasar un bloque de Html desde un componente padre a un componente hijo para este ultimo lo muestre como suyo. De esta forma podemos personalizar el html del componente hijo desde el padre.

Con los props envías datos a los hijos Con los slots envias html a los hijos

Wilmar Alexis Caicedo Serrano

student•

Componente ModalJsx.vue

  render () {
    return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Componente App.vue

    <modal-jsx v-bind:show="show">
      <h1>Modal title</h1>
      <p>Hello World</p>
    </modal-jsx>

Mateo Santiago Zapata Maldonado

student•

Me parece mucho mas Facil la forma natural de trabajo de Vue, ¿porque utilizar esto?

Jorge Palacios

student•

Se usa para contenido hecho con programación en el sitio. Para aplicaciones más complejas.

Anthony Will Solsol Soplin

student•

Buena explicación, sencilla y entendible

César Ernesto Rivas Martínez

student•

App.vue

<modal-jsx :show="showModal">
	<h1>Test Slot with JSX</h1>
</modal-jsx>

<div class="modal">
        <div class="content">{this.$slots.default}</div>
        <button onClick={this.cancelHandler}>Cancelar</button>
        <button onClick={this.okHandler}>Ok</button>
</div>

Derek Samuel Paúl Peña

student•

Por si quieres trabajar con las directivas @ o v-on específicamente, te recomiendo trasladar con un slot desde el JSX hasta el App.vue la información de este y definir tus métodos en el App( claro, sería útil en especial en este caso remoto, pero en un proyecto mucho más grande no lo sería tanto🤔): JSX:

&lt;script&gt;
export default {
    name:&quot;ModalJsX&quot;,

    props: {
        show: {
            type: Boolean,
            default: false
        }
    },

    render() {
      return(this.show) ?&lt;div id=&quot;modal&quot; v-show=&quot;show&quot;&gt;
                &lt;div&gt;{ this.$slots.default }&lt;/div&gt;
            &lt;/div&gt; : null
    }
}
&lt;/script&gt;

App.vue:

&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;button @click.prevent=&quot;toogleModalWatcher&quot;&gt;Toogle Modal&lt;/button&gt;
        &lt;modal-create-element-vue :show=&quot;show&quot;&gt;
            &lt;p&gt;Sistem Rooms&lt;/p&gt;
            &lt;h1&gt;Derek&lt;/h1&gt;
        &lt;/modal-create-element-vue&gt;
        &lt;modal-js-x :show=&quot;show&quot;&gt;
            &lt;h1&gt;This is my room&lt;/h1&gt;
            &lt;p&gt;Tiene 84 elementos dentro&lt;/p&gt;
            &lt;button @click='ChooseYourCancel'&gt;Cancel&lt;/button&gt;
            &lt;button @click='ChooseYourOk'&gt;Ok&lt;/button&gt;
        &lt;/modal-js-x&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import ModalJsX from &quot;./ModalJsX&quot;;
export default {
    name:&quot;app&quot;,
    data() {
        return {
            show: false
        }
    },
    components: {
        ModalJsX
    },
    methods: {
        toogleModalWatcher() {
            this.show = !this.show;
        },
        ChooseYourCancel() {
            console.log(`You Choosed cancel`)
        },
        ChooseYourOk() {
            console.log(`You Choosed OK`)
        },
    }
}
&lt;/script&gt;

&lt;style&gt;
    body {
        background-color: rgb(255, 243, 218);
    }
&lt;/style&gt;

return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandle} >Cancel</button>
      <button onClick={this.clickOkHandle}>Ok</button>
    </div> : null

render() {
    return (this.show) ? <div id="modal">
      <div class="content">{this.$slots.default}</div>
      <button onClick={this.clickCancelHandler}>Cancelar</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

render () {
        return (this.show) ? <div class="modal">
            {/* <p>{this.message}</p> */}
            {this.$slots.default}
            <button onClick={this.clickCancelHandler}>Cancel</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null
    },

  render() {
    return (this.show) ? <div class="modal">
      <div> {this.$slots.default} </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

return (this.show) ? <div class="modal">
                <div class="content">{this.$slots.default}</div>
                <button onClick={this.clickCancelHandler}>Cancel</button>
                <button onClick={this.clickOkHandler}>Ok</button>
            </div> : null

return (this.show) ? <div class="modal">
            <p>{this.$slots.default}</p>
            <button onClick={this.clickCancelHandler}>Cancelar</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null

		render() {
		return (this.show) ? <div class="modal">
			<div class="content">{this.$slots.default}
				<button onClick={this.clickCancelHandler}>Cancel</button>
				<button onClick={this.clickOkHandler}>Ok</button>
			</div>
		</div> : null
	},

  render () {
    return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

&lt;script&gt;
export default {
    name:&quot;ModalJsX&quot;,

    props: {
        show: {
            type: Boolean,
            default: false
        }
    },

    render() {
      return(this.show) ?&lt;div id=&quot;modal&quot; v-show=&quot;show&quot;&gt;
                &lt;div&gt;{ this.$slots.default }&lt;/div&gt;
            &lt;/div&gt; : null
    }
}
&lt;/script&gt;

&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;button @click.prevent=&quot;toogleModalWatcher&quot;&gt;Toogle Modal&lt;/button&gt;
        &lt;modal-create-element-vue :show=&quot;show&quot;&gt;
            &lt;p&gt;Sistem Rooms&lt;/p&gt;
            &lt;h1&gt;Derek&lt;/h1&gt;
        &lt;/modal-create-element-vue&gt;
        &lt;modal-js-x :show=&quot;show&quot;&gt;
            &lt;h1&gt;This is my room&lt;/h1&gt;
            &lt;p&gt;Tiene 84 elementos dentro&lt;/p&gt;
            &lt;button @click='ChooseYourCancel'&gt;Cancel&lt;/button&gt;
            &lt;button @click='ChooseYourOk'&gt;Ok&lt;/button&gt;
        &lt;/modal-js-x&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import ModalJsX from &quot;./ModalJsX&quot;;
export default {
    name:&quot;app&quot;,
    data() {
        return {
            show: false
        }
    },
    components: {
        ModalJsX
    },
    methods: {
        toogleModalWatcher() {
            this.show = !this.show;
        },
        ChooseYourCancel() {
            console.log(`You Choosed cancel`)
        },
        ChooseYourOk() {
            console.log(`You Choosed OK`)
        },
    }
}
&lt;/script&gt;

&lt;style&gt;
    body {
        background-color: rgb(255, 243, 218);
    }
&lt;/style&gt;

Utilizando Slots con Render Functions y JSX

Bienvenida e Introducción

Bienvenida y Presentación del proyecto: PlatziRooms

Creación y configuración inicial del proyecto utilizando VUE CLI 3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

¿Que son las Render Functions y JSX?

Preparando nuestro entorno para un prototipo

Creación de un componente con createElement

Utilizando JSX para la creación de un componente

Utilizando Slots con Render Functions y JSX

Creando un Modal de Login para PlatziRooms

Creando la lógica general de nuestros modales con Vuex

Creando el contenido de nuestro modal

Componentes controlados y uso de librerías externas

Componentes Controlados y Variables Personalizadas

Construcción del componente de Recordar Contraseña

Creación de un componente Slider utilizando la librería tiny-slider

High Order Functions

¿Qué son las High Order Functions? - Crea tu primera HOF

Vuex

Obtener datos usando Vuex

Crea un getter dinámico en Vuex utilizando HOF

Creación de la vista para creación de publicaciones

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

Instalación y Configuracion de Firebase Realtime Database

Obteniendo los datos desde Firebase Realtime Database

Agregando la consulta de usuarios

Almacenando nuevas publicaciones en Firebase Realtime Database

Perfeccionando el flujo de navegación de nuestra App

Autenticación con Firebase

Configuracion Inicial para trabajar con Firebase Authentication

Agregando nuevos usuarios en firebase autentication

Inicio de sesión de usuario

Cierre de sesión de usuario

Protegiendo páginas utilizando Navigation Guards

Scoped Slots

¿Qué son los Scoped Slots? Dónde utilizarlos y por qué

Integración de Scoped Slots en Platzi Rooms

Deploy

Creando y desplegando nuestra app en Heroku

Conclusiones y Despedida