Bienvenida e Introducción

1

Bienvenida y Presentación del proyecto: PlatziRooms

2

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

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

¿Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creación de un componente con createElement

7

Utilizando JSX para la creación de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la lógica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librerías externas

12

Componentes Controlados y Variables Personalizadas

13

Construcción del componente de Recordar Contraseña

14

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

High Order Functions

15

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

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter dinámico en Vuex utilizando HOF

19

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

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalación y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegación de nuestra App

Autenticación con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesión de usuario

29

Cierre de sesión de usuario

30

Protegiendo páginas utilizando Navigation Guards

Scoped Slots

31

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

32

Integración de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
11 Hrs
12 Min
57 Seg

Utilizando Slots con Render Functions y JSX

8/34
Resources

Slots help us to create reusable and customizable components at the same time, they allow us to define the content of our components to avoid the work of creating a new file for each change in the components. They are very useful and important in the Vue.js world.

Contributions 24

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

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

https://vuejs.org/v2/guide/render-function.html#slots-vs-children

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>

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>

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
  },

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…

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>

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 {}.

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>

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>

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
},

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
},

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

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>

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
	},

¿Que son los Slots?

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>

Buena explicación, sencilla y entendible

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>

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:

<script>
export default {
    name:"ModalJsX",

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

    render() {
      return(this.show) ?<div id="modal" v-show="show">
                <div>{ this.$slots.default }</div>
            </div> : null
    }
}
</script>

App.vue:

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

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

<style>
    body {
        background-color: rgb(255, 243, 218);
    }
</style>

Modaljsx.vue

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

App.vue:

<modal-jsx :show="show">
      <h1>Hello from ModalCreateElement</h1>
      <p>This is a modal</p>
    </modal-jsx>

APP.vue

<ModalJSX :show="show" message="Hello JSX">
      <p>Hello JSX!</p>
    </ModalJSX>

ModalJSX.vue

<p>{this.$slots.default}</p>
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
}

`
App.vue
<modal-jsx :show=“show”>
<p>Hola Mundillito</p>
</modal-jsx>

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
`