Cómo crear componentes con Vue.js

Clase 9 de 17 • Curso Básico de Vue.js 2016

Resumen

En este vídeo vamos a ver algunos de los componentes de Vue.js y algunas formas de utilizarlos.

Los componentes son conceptos que aparecen en otros frameworks de JavaScript, especialmente en React. Estos componentes son totalmente reutilizables.

Jesus Yuzet Rodriguez Ali Rodriguez Ali

student•

me gustaría que el maestro Sacha diera el curso de react con redux

Alvaro Emmanuel Monrreal Alonso

student•

Si, el si se explica muy bien

Carlos Alfaro

student•

Totalmente de acuerdo!

javier alejandro segovia

student•

me encantaria que sacha de curso de angular, el otro profesor escribe muy rapido cuesta seguirle el ritmo, poco concepto teorico y no da ejemplo para entenderlo

Carlos Alfaro

student•

No he visto el curso de Angular, pero tuve la misma experiencia con el de React, le entiendo mucho mas a Sacha. Muy buen maestro

Jose Andres Gonzalez Guevara

student•

Me fue mal con el curso de Angular, terminé tomando uno en otra plataforma…

Mario García Alarcón

student•

Aquí les dejo un resumen del módulo de fundamentos de Vue.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fundamentos de Vue</title>
</head>
<body>
    <div id="app">
        <h3>TWO WAY DATA-BINDING</h3>
        <span>Hola {{ name }}</span><br>
        <input type="text" v-model="name"><br>

        <h3>CONTROL DE FLUJO</h3>
        <span v-show="condicion">v-show</span><br>
        <p v-if="condicion">v-if</p>
        <p v-else>Ahora no se ve</p>
        <div>
            <span v-for="objeto in objetos">{{ objeto.name }}</span>
        </div>

        <h3>FILTROS</h3>
        <span>{{ filtro | lowercase }}</span><br>
        <span>{{ filtro | uppercase }}</span><br>
        <span>{{ filtro | capitalize }}</span><br>

        <h3>MÉTODOS</h3>
        <span>{{ contador }}</span>
        <button @click="sumar">sumar</button>
        <button @click="restar">restar</button>

        <h3>FORMULARIOS</h3>
        <form @submit.prevent="submit" action="" method="post">
            <template v-for="curso in cursos">
                <input type="checkbox" v-model="cursosSeleccionados" :id="curso.value" :value="curso.value">
                <label :for="curso.value">{{ curso.nombre }}</label>
            </template>
            <button type="submit">Enviar</button>
        </form>

        <h3>COMPONENTES</h3>
        <form @submit.prevent="submit" action="" method="post">
            <template v-for="curso in cursos">
                <curso @checked="selectCurso" :curso="curso"></curso>
            </template>
            <button type="submit">Enviar</button>
        </form>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        Vue.component('curso', {
            props: [ 'curso' ],
            methods: {
                onchange: function(ev) {
                    this.$emit('checked', this.curso.value, ev.target.checked)
                }
            },
            template: `
                <div>
                    <input @change="onchange" type="checkbox" :id="curso.value" :value="curso.value">
                    <label :for="curso.value">{{ curso.nombre }}</label>
                </div>
            `
        })

        let app = new Vue({
            el: '#app',
            data: {
                name: 'MUNDO!!',
                propiedad: "bindeo modelo > vista",
                filtro: "Me están filtrando",
                condicion: true,
                objetos: [
                    {name: "objeto 1"},
                    {name: "objeto 2"},
                    {name: "objeto 3"}
                ],
                contador: 0,
                cursos: [
                    { 
                        nombre: 'Curso de Vue.js',
                        value: 'vue' 
                    },
                    { 
                        nombre: 'Curso de Angular',
                        value: 'angular' 
                    },
                    { 
                        nombre: 'Curso de React',
                        value: 'react' 
                    }
                ],
                cursosSeleccionados: []
            },
            filters: {
                uppercase: str => str.toUpperCase(),
                lowercase: str => str.toLowerCase(),
                capitalize: str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(),
                reverse: str => str.split("").reverse().join("")
            },
            methods: {
                sumar: function() {
                    this.contador++
                },
                restar: function() {
                    this.contador--
                },
                submit: function() {
                    console.log(this.cursosSeleccionados)
                },
                selectCurso: function(curso, checked) {
                    if (checked) {
                        this.cursosSeleccionados.push(curso)
                    } else {
                        let index = this.cursosSeleccionados.indexOf(curso)
                        this.cursosSeleccionados.splice(index, 1)
                    }
                }
            }
        })
    </script>
</body>
</html>

Alberto Eligio Sánchez Germán

student•

Es bueno aclarar que los atributos curso y cursosSeleccionados tienen esos nombres porque asi se les llamó en las propiedades (props) del componente y lo valores que les suministras son los arrays antes creados con los mismos nombres.

Bruno Diharce

student•

¿Como se comunica el componente (hijo) con el padre ( la instancia de tipo Vue en este caso) ?

Podriamos verlo de la siguiente manera:

El padre se pone a la escucha del hijo con la palabra clave “palabraClave”.

v-on:palabraClave = 'funcionPadre' Entonces el hijo crea su template, todo lindo, todo hermoso. Pero pero pero, en el template tenemos (por ejemplo), un button con el atributo v-on:click=“nombreDeMiFuncion”

Cuando el usuario haga click en ese boton, se va a llamar a la funcion del hijo, llamada nombreDeMiFuncion, y esta va a emitir al padre la palabra clave! “Papáá! palabraClave!!!”

methods:{
	nombreDeMiFuncion:function(){
		this.$emit('palabraClave')
	}
}```

El padre entonces lo que hace al escuchar palabraClave es ejecutar funcionPadre,osea la funcion **del padre**

// Todo lo que pasa en el componente queda en el componente, la unica forma para comunicarlo al padre es emitiendolo ( 

```this.$emit(‘palabraClave’) ```
)

Christian David Sánchez

student•

excelente aporte

David Daniel Castillo Nava

student•

Plantillas de cadena de texto

Las plantillas de cadena de texto (template strings) son literales de texto que habilitan el uso de expresiones incrustadas. Es posible utilizar cadenas de texto de más de una línea, y funcionalidades de interpolación de cadenas de texto con ellas.

Las plantillas de cadena de texto se delimitan con el caracter de comillas o tildes invertidas(grave accent)

(`Esto es un template string `)

en lugar de las comillas simples o dobles. Las plantillas de cadena de texto pueden contener marcadores, indentificados por el signo de pesos, y envueltos en llaves (${expresión}).

Ejemplo:

let numberOne = 2
let numberTwo = 3

console.log(`La suma de estos numeros es ${ numberOne + numberTwo }`)

David Daniel Castillo Nava

student•

Todo lo que desarrolle en clase:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ title | uppercase }}</h1>
		<h2>{{ subtitle | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="addCount" >sumar</button>
		<button @click="strCount" >restar</button>
		<div>El contadore esta en {{count}}</div>
		<!-- @keyup.enter="submit" :value="nombre" name="nombre"  --> 
		<input v-model="name" type="text" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ name | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>

			<template v-for="course in courses">
				<cursos :course="course" @checked="selectCourse" ></cursos>
			</template>
			
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('cursos', {
			props: ['course'],
			methods: {
				onChange (e) {
					this.$emit('checked', this.course.value, e.target.checked)
				}
			},
			template: `
				<div>
					<input type="checkbox" :id="course.value" :value="course.value" @change="onChange" />
					<label :for="course.value">{{ course.name }}</label>
				</div>
			`
		})
		var app = new Vue({
			el: '#app',
			data () {
				return {
					title: 'Estas viendo Platzi',
					subtitle: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					name: '',
					count: 0,
					courses: [
						{
							name: 'Curso de Vue.js',
							value: 'vue'
						},
						{
							name: 'Curso de React.js',
							value: 'react'
						},
						{
							name: 'Curso de SEO',
							value: 'seo'
						},
						{
							name: 'Curso de Growth Marketing',
							value: 'marketing'
						}
					],
					coursesSelected:[] 
				}
			},
			methods: {
				addCount (event) {
					this.count++
				},
				strCount (event) {
					this.count--
				},
				submit (event) {
					console.log(this.coursesSelected)
				},
				selectCourse (course, checked) {
					if (checked) {
						 this.coursesSelected.push(course)
					} else {
						let index = this.coursesSelected.indexOf(course)
						this.coursesSelected.splice(index, 1)
					}  
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>```

Abner Batz

student•

¿Porqué Node.js? Te hubieras orientado tan solo con Vue.

Melina Jacqueline onoriaga

student•

Los componentes en Vue pueden cerrar en si mismo, del mismo modo que es react: <curso :curso="c" />

Evert Escalante

student•

Bueno despues de ver 5 veces esta clase, creo que la voy entendiendo, me voy a tipear un rato el ejemplo.
dejo mi codigo comentado a manera de expresarme los conocimientos dados por Sacha

<!DOCTYPE html>
<html>
  <head>
    <title>Como crear componentes con VueJs</title>
  </head>
  <body>
    <div id="app">
      <form v-on:submit.prevent="submit" action="" method="get">
        <h2>Cuales con tus cursos favoritos?</h2>

        <!--1-por cada curso en cursos use el siguiente componente-->
        <template v-for="curso in cursos">

          <!--use este componente para mostrar lo que queremos en la pantalla, con v-bind: le inertamos la variable curso, es la misma variable que tenemos alliba en template entonces este llamado a la etiqueta curso contiene v-bind que le pasamos ese curso para que lo tome como el curso al que tiene que pasarle el template que tiene este componente en su logica -->
          <!--7- el atributo v-on:checked captura el evento que envio el componente hijo y cuando sucede dispara un metodo llamado selectCurso, este lo creamos en los methods del componente padre -->
          <curso v-bind:curso="curso" v-on:checked="selectCurso"></curso>
      
        </template>
        <button type="submit">enviar</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
      
      //2-creamos este componente hijo, para que vue sepa que cada vez que aparezca, la etiqueta curso aprezca eso en pantalla lo que tiene el componente, para esto el primer parametro es el nombre de la etiqueta, en este caso es la etiqueta curso.
      Vue.component('curso', {

        //4- vamos a indicarle las propiedades que necesita este componente para dibujarse, esto lo hacemos con  la palbra props, y le pasamos un array, en este caso necesita el curso, de donde viene ese curso, del curso.value que toma el template por cada uno de los curso en cusrsos
        props: [ 'curso' ],

        //-6.1- El componente curso tiene que emitir un evento cada vez que suceda algo que el padre tenga que escuchar, entonces cada vez que seleccionemos un curso el componente hijo tiene que emitir un evento diciendo si ese curso fue checkeado o si se saco elcheck, y el padre es el que va a tener registro de los cursos seleccionados, ese metodo llamado onchange lo definimos aqui en methods, para  hagamos algo con el, lo indicado seria recordemos notificarle al padre para que este registre los cambios
        methods: {
          //6.2-this.emit('checked' de este metodo de este emitamos otro evento llemado 'checked, es decir que se checkeo un curso,  y como segundo parametro  le pasamos el valor del curso el nombre y valor this.curso.value  y asi pasarlos en este emit, como tercer parametro pasamos si el elemento fue checkeado o desckechado eso lo hacemos accediendo a la variable del evento'), ya con esto listo el componente padre tiene que capturar este evento que emitimos para que este escuchando cada vez que hayan cambios cada vez que se de check en algun de los cursos en el dom
          onchange: function (ev) {
            this.$emit('checked', this.curso.value, ev.target.checked)
          }
        },

      //3-el segundo de los parametros es un objeto js lo llamaremos template, y ahi le decimos como queremos que ese componente aparezca en pantalla, entonces este atributo template recibe un templateliteral  para insertar ahi lo que queremos que haga ese template que tenga el componente

      //6-la linea v-on:change en el input checkbox nos anza un evento llamado onchange este evento mira para que cada vez que halla un cambio en el valor que tiene llamemos a un evento, este evento lo guardamos en el evento hijo, ya sabemos que va en un atributo objeto llamado methodsy ahi lo declaramos,
        template: `
          <div>
            <input  type="checkbox" v-bind:id="curso.value" v-bind:value="curso.value" v-on:change="onchange" />
            <label v-bind:for="curso.value">{{ curso.nombre }}</label>
          </div>
        `
      })    
      let app =  new Vue({
        el: '#app',
        data: {
          //este array contiene todos los cursos, 
          cursos: [
            { nombre: 'Curso de vue.js', value: 'vue'},
            { nombre: 'Curso de SEO', value: 'seo'},
            { nombre: 'Curso de react y redux', value: 'react'},
            { nombre: 'Curso de Growth Marketing', value: 'growth'}
          ],
          //aqui van los cursos seleccionados
          cursosSeleccionados: []
          },
          methods: {
            submit: function() {
            console.log('se ejecuta el metodo submit')
            //hacemos console.log de esos cursosSeleccionados y lo hacemos con this para referirnos a esa instancia la de este objeto de vue
            console.log(this.cursosSeleccionados)
            },

            //7.1- aqui creamos ese metodo  y va a recibir como parametro los dos parametros que le pasamos a checked que si recodamos son el curso, y si esta checkeado, vue se encarga de pasarle los dos parametros desde el evento en el componente hijo
            selectCurso: function (curso, checked) {

              //si fue checkeado lo agregamos a la lista de cursos seleccionados
              if(checked) {
                this.cursosSeleccionados.push(curso)
              }
              //si no saquelo de ese array  si ya estaba
              else {
                //definimos cual es el index de ese curso lo obtenemos
                let index = this.cursosSeleccionados.indexOf(curso)
                //lo quitamos del array
                this.cursosSeleccionados.splice(index, 1)
              }

            }
          }
      })
    </script>
  </body>
</html>

<!--Lo que sucede aqui es que el componente padre, que en este caso es el que declaramos con new Vue, le pasa las porpiedades que tiene al componente hijo, pero el componente hijo cada vez que quiera modificar cuales son los cursos seleccionados, no debe hacerlo directamente sobre los atributos del padre, esta mal, el hijo debe emitir eventos para que el padre responda ante esos eventos-->```

Eduardo David

student•

Gran Aporte, me ayudo a resolver un detalle

Abel Herculano Martínez

student•

Qué buen detalle, gracias!!

Adrian Guerrero

student•

Quiero aportar que el warning con cursosSeleccionados es porque el v-bind nos ayuda a manejar atributos de forma dinamica, y con atributos me refiero a atributos de la etiqueta (ejemplo, el atributo src de una etiqueta img), entonces al escribirlo en camel-case nos da ese warning de mala practica, lo correcto es escribirlo como lo hace despues

Ximena Moreta

student•

Hola, tengo una consulta sobre en que caso se usa succes: (data) >= , en lugar de success: function(data )

Alan Lapierre

student•

El poder crear componentes nos permite que nuestro html sea mas SEMÁNTICO, es decir, darle mas sentido a un fragmento de código..No es lo mismo para el que tenga que mantener el código ver el componente CURSO, que ver el input y el label "sueltos"...claro que este no es el principal objetivo de los componentes, pero esta claridad y auto documentación es un beneficio secundario muy importante a mi ver.

Manuel Ojeda

student•

La finalidad es poder reutilizar código cuando sabes que el componente se volverá repetitivo, así podemos optimizar código, algo similar como con React.

Aarón González

student•

Es una de las grandes ventajas que nos permite el trabajo con componentes. Además, trabajar con componentes nos permite incluírlos de forma sencilla donde sabemos que estos se van a repetir.

Cuéntanos, ¿cómo te ha ido con el proyecto del curso? :D

Rubén Cuello

student•

Esto es mucho más complicado que lo que ya teníamos! Además es mucho más código también. No entiendo porque lo usaríamos.

jose

student•

como usar add, delete curso sin un boton enviar

Kevin Nick Pascual Tuesta

student•

@keyup.enter="method"

Esto realizara el lo que esta en tu método en el script.

Kevin Nick Pascual Tuesta

student•

Lo pones dentro del input, espero verte ayudado.

Jonattan Infante

student•

Que quiere decir $emit en el Codigo?

Juan Alberto Maizares

student•

Se agradece que siempre hagan el deploy

Eleonora Lester

student•

vue-component

Eleonora Lester

student•

component props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fundamentos de Vue</title>
</head>
<body>
    <div id="app">
        <h3>TWO WAY DATA-BINDING</h3>
        <span>Hola {{ name }}</span><br>
        <input type="text" v-model="name"><br>

        <h3>CONTROL DE FLUJO</h3>
        <span v-show="condicion">v-show</span><br>
        <p v-if="condicion">v-if</p>
        <p v-else>Ahora no se ve</p>
        <div>
            <span v-for="objeto in objetos">{{ objeto.name }}</span>
        </div>

        <h3>FILTROS</h3>
        <span>{{ filtro | lowercase }}</span><br>
        <span>{{ filtro | uppercase }}</span><br>
        <span>{{ filtro | capitalize }}</span><br>

        <h3>MÉTODOS</h3>
        <span>{{ contador }}</span>
        <button @click="sumar">sumar</button>
        <button @click="restar">restar</button>

        <h3>FORMULARIOS</h3>
        <form @submit.prevent="submit" action="" method="post">
            <template v-for="curso in cursos">
                <input type="checkbox" v-model="cursosSeleccionados" :id="curso.value" :value="curso.value">
                <label :for="curso.value">{{ curso.nombre }}</label>
            </template>
            <button type="submit">Enviar</button>
        </form>

        <h3>COMPONENTES</h3>
        <form @submit.prevent="submit" action="" method="post">
            <template v-for="curso in cursos">
                <curso @checked="selectCurso" :curso="curso"></curso>
            </template>
            <button type="submit">Enviar</button>
        </form>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        Vue.component('curso', {
            props: [ 'curso' ],
            methods: {
                onchange: function(ev) {
                    this.$emit('checked', this.curso.value, ev.target.checked)
                }
            },
            template: `
                <div>
                    <input @change="onchange" type="checkbox" :id="curso.value" :value="curso.value">
                    <label :for="curso.value">{{ curso.nombre }}</label>
                </div>
            `
        })

        let app = new Vue({
            el: '#app',
            data: {
                name: 'MUNDO!!',
                propiedad: "bindeo modelo > vista",
                filtro: "Me están filtrando",
                condicion: true,
                objetos: [
                    {name: "objeto 1"},
                    {name: "objeto 2"},
                    {name: "objeto 3"}
                ],
                contador: 0,
                cursos: [
                    { 
                        nombre: 'Curso de Vue.js',
                        value: 'vue' 
                    },
                    { 
                        nombre: 'Curso de Angular',
                        value: 'angular' 
                    },
                    { 
                        nombre: 'Curso de React',
                        value: 'react' 
                    }
                ],
                cursosSeleccionados: []
            },
            filters: {
                uppercase: str => str.toUpperCase(),
                lowercase: str => str.toLowerCase(),
                capitalize: str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(),
                reverse: str => str.split("").reverse().join("")
            },
            methods: {
                sumar: function() {
                    this.contador++
                },
                restar: function() {
                    this.contador--
                },
                submit: function() {
                    console.log(this.cursosSeleccionados)
                },
                selectCurso: function(curso, checked) {
                    if (checked) {
                        this.cursosSeleccionados.push(curso)
                    } else {
                        let index = this.cursosSeleccionados.indexOf(curso)
                        this.cursosSeleccionados.splice(index, 1)
                    }
                }
            }
        })
    </script>
</body>
</html>

methods:{
	nombreDeMiFuncion:function(){
		this.$emit('palabraClave')
	}
}```

El padre entonces lo que hace al escuchar palabraClave es ejecutar funcionPadre,osea la funcion **del padre**

// Todo lo que pasa en el componente queda en el componente, la unica forma para comunicarlo al padre es emitiendolo ( 

```this.$emit(‘palabraClave’) ```
)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ title | uppercase }}</h1>
		<h2>{{ subtitle | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="addCount" >sumar</button>
		<button @click="strCount" >restar</button>
		<div>El contadore esta en {{count}}</div>
		<!-- @keyup.enter="submit" :value="nombre" name="nombre"  --> 
		<input v-model="name" type="text" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ name | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>

			<template v-for="course in courses">
				<cursos :course="course" @checked="selectCourse" ></cursos>
			</template>
			
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('cursos', {
			props: ['course'],
			methods: {
				onChange (e) {
					this.$emit('checked', this.course.value, e.target.checked)
				}
			},
			template: `
				<div>
					<input type="checkbox" :id="course.value" :value="course.value" @change="onChange" />
					<label :for="course.value">{{ course.name }}</label>
				</div>
			`
		})
		var app = new Vue({
			el: '#app',
			data () {
				return {
					title: 'Estas viendo Platzi',
					subtitle: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					name: '',
					count: 0,
					courses: [
						{
							name: 'Curso de Vue.js',
							value: 'vue'
						},
						{
							name: 'Curso de React.js',
							value: 'react'
						},
						{
							name: 'Curso de SEO',
							value: 'seo'
						},
						{
							name: 'Curso de Growth Marketing',
							value: 'marketing'
						}
					],
					coursesSelected:[] 
				}
			},
			methods: {
				addCount (event) {
					this.count++
				},
				strCount (event) {
					this.count--
				},
				submit (event) {
					console.log(this.coursesSelected)
				},
				selectCourse (course, checked) {
					if (checked) {
						 this.coursesSelected.push(course)
					} else {
						let index = this.coursesSelected.indexOf(course)
						this.coursesSelected.splice(index, 1)
					}  
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>```

<!DOCTYPE html>
<html>
  <head>
    <title>Como crear componentes con VueJs</title>
  </head>
  <body>
    <div id="app">
      <form v-on:submit.prevent="submit" action="" method="get">
        <h2>Cuales con tus cursos favoritos?</h2>

        <!--1-por cada curso en cursos use el siguiente componente-->
        <template v-for="curso in cursos">

          <!--use este componente para mostrar lo que queremos en la pantalla, con v-bind: le inertamos la variable curso, es la misma variable que tenemos alliba en template entonces este llamado a la etiqueta curso contiene v-bind que le pasamos ese curso para que lo tome como el curso al que tiene que pasarle el template que tiene este componente en su logica -->
          <!--7- el atributo v-on:checked captura el evento que envio el componente hijo y cuando sucede dispara un metodo llamado selectCurso, este lo creamos en los methods del componente padre -->
          <curso v-bind:curso="curso" v-on:checked="selectCurso"></curso>
      
        </template>
        <button type="submit">enviar</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
      
      //2-creamos este componente hijo, para que vue sepa que cada vez que aparezca, la etiqueta curso aprezca eso en pantalla lo que tiene el componente, para esto el primer parametro es el nombre de la etiqueta, en este caso es la etiqueta curso.
      Vue.component('curso', {

        //4- vamos a indicarle las propiedades que necesita este componente para dibujarse, esto lo hacemos con  la palbra props, y le pasamos un array, en este caso necesita el curso, de donde viene ese curso, del curso.value que toma el template por cada uno de los curso en cusrsos
        props: [ 'curso' ],

        //-6.1- El componente curso tiene que emitir un evento cada vez que suceda algo que el padre tenga que escuchar, entonces cada vez que seleccionemos un curso el componente hijo tiene que emitir un evento diciendo si ese curso fue checkeado o si se saco elcheck, y el padre es el que va a tener registro de los cursos seleccionados, ese metodo llamado onchange lo definimos aqui en methods, para  hagamos algo con el, lo indicado seria recordemos notificarle al padre para que este registre los cambios
        methods: {
          //6.2-this.emit('checked' de este metodo de este emitamos otro evento llemado 'checked, es decir que se checkeo un curso,  y como segundo parametro  le pasamos el valor del curso el nombre y valor this.curso.value  y asi pasarlos en este emit, como tercer parametro pasamos si el elemento fue checkeado o desckechado eso lo hacemos accediendo a la variable del evento'), ya con esto listo el componente padre tiene que capturar este evento que emitimos para que este escuchando cada vez que hayan cambios cada vez que se de check en algun de los cursos en el dom
          onchange: function (ev) {
            this.$emit('checked', this.curso.value, ev.target.checked)
          }
        },

      //3-el segundo de los parametros es un objeto js lo llamaremos template, y ahi le decimos como queremos que ese componente aparezca en pantalla, entonces este atributo template recibe un templateliteral  para insertar ahi lo que queremos que haga ese template que tenga el componente

      //6-la linea v-on:change en el input checkbox nos anza un evento llamado onchange este evento mira para que cada vez que halla un cambio en el valor que tiene llamemos a un evento, este evento lo guardamos en el evento hijo, ya sabemos que va en un atributo objeto llamado methodsy ahi lo declaramos,
        template: `
          <div>
            <input  type="checkbox" v-bind:id="curso.value" v-bind:value="curso.value" v-on:change="onchange" />
            <label v-bind:for="curso.value">{{ curso.nombre }}</label>
          </div>
        `
      })    
      let app =  new Vue({
        el: '#app',
        data: {
          //este array contiene todos los cursos, 
          cursos: [
            { nombre: 'Curso de vue.js', value: 'vue'},
            { nombre: 'Curso de SEO', value: 'seo'},
            { nombre: 'Curso de react y redux', value: 'react'},
            { nombre: 'Curso de Growth Marketing', value: 'growth'}
          ],
          //aqui van los cursos seleccionados
          cursosSeleccionados: []
          },
          methods: {
            submit: function() {
            console.log('se ejecuta el metodo submit')
            //hacemos console.log de esos cursosSeleccionados y lo hacemos con this para referirnos a esa instancia la de este objeto de vue
            console.log(this.cursosSeleccionados)
            },

            //7.1- aqui creamos ese metodo  y va a recibir como parametro los dos parametros que le pasamos a checked que si recodamos son el curso, y si esta checkeado, vue se encarga de pasarle los dos parametros desde el evento en el componente hijo
            selectCurso: function (curso, checked) {

              //si fue checkeado lo agregamos a la lista de cursos seleccionados
              if(checked) {
                this.cursosSeleccionados.push(curso)
              }
              //si no saquelo de ese array  si ya estaba
              else {
                //definimos cual es el index de ese curso lo obtenemos
                let index = this.cursosSeleccionados.indexOf(curso)
                //lo quitamos del array
                this.cursosSeleccionados.splice(index, 1)
              }

            }
          }
      })
    </script>
  </body>
</html>

<!--Lo que sucede aqui es que el componente padre, que en este caso es el que declaramos con new Vue, le pasa las porpiedades que tiene al componente hijo, pero el componente hijo cada vez que quiera modificar cuales son los cursos seleccionados, no debe hacerlo directamente sobre los atributos del padre, esta mal, el hijo debe emitir eventos para que el padre responda ante esos eventos-->```

Cómo crear componentes con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?