No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Crear Componentes Custom

16/38
Recursos

Aportes 55

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hasta ahora lo que va de curso lo he entendido perfectamente, aprovecho para felicitar al profesor por su forma tan clara de explicar, y mejor aun ir directo al tema, sin divagar mucho en trivialidades! 馃憤馃徏

Wao!. Est谩 superhipermega genialisimo!

En resumen, para crear un componente se utiliza la propiedad component de Vue, la cual tiene casi los mismos metodos que la instancia de Vue donde veniamos haciendo todo, nada mas que este tiene el metodo template donde va a ir el 鈥渉tml鈥 de nuestro componente 馃槃

Que gran profesor, muy clara su forma de explicar

Toda mi carrera he trabajado solamente backend y hasta hace poco me anim茅 a empezar este nuevo mundo del front desde cero. Y este curso es perfecto! Gracias

Algo que no explico es que la ventaja de trabajar con componentes es que cada componente puede manejar su propia data individual. Es decir; puedes tener m谩s de un bot贸n y cada bot贸n manejara su contador propio. Les invito a hacer la prueba.

En mi trabajo cuantas veces no so帽aron con hacerlo todo por componentes y siempre termin谩bamos haciendo (como se dice coloquialmente en M茅xico) 鈥渦n desmadre鈥, esto es mil veces genial

https://codepen.io/robertosd22/pen/QWjZOXO

Vue.component()
.
Es la funci贸n que permite registrar un componente nuevo y asignarle un nombre. Recibe dos par谩metros, el primero es el nombre y el segundo es un objeto donde tenemos las mismas propiedades (data, computed, etc) que tenemos en la instancia de Vue.
.
Con la propiedad template, podemos definir el HTML que va a tener el componente en formato de string.
.
Dentro de un componente comenzamos a tener la estructura:

  • data
  • methods
  • template

Spoiler alert = 鈥榁ue.component鈥 se puede utilizar en forma de etiqueta para nuestro html. Con ello podemos tener varios componentes para poder utilizar mas de una vez en nuestro c贸digo de manera sencilla.

Un componente es una etiqueta custom que creamos nosotros para hacer alguna secci贸n que funcione por su propia cuenta y eso se logra a trav茅s del m茅todo Vue.component

Muy bien explicado, como podemos crear y usar los componentes de vue.

Me parece que est谩 bien claro todo lo que explica el profe, me pregunto cuando sacar谩n la continuaci贸n

Mas sencillo que en react, aunque me gusta mas el jsx

complemento
Registro Global del componente
"Estos componentes son registrados globalmente. Lo que significa que ellos pueden ser usado en la plantilla de cual instancia ra铆z de Vue(new Vue) creada despu茅s del registro. Por ejemplo:"

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })```


<div id=鈥渁pp鈥>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>```

https://es.vuejs.org/v2/guide/components-registration.html

16.-Crear Componentes Custom

Vue.component() es la funci贸n que nos permite registrar un componente nuevo y asignarle un nombre en el primer par谩metro, y el segundo es un objeto.

Dentro de template va la parte de HTML que queremos para ese componente.

Vue solo nos permite tener un 煤nico elemento padre al momento de crear los componentes.

Hasta el momento todo muy claro.
Me da paz ir entendiendo todo el curso y que todo lo que hago funciona OK.
Gracias Ignacio!

Que bien explicado, gracias!

馃槷

lo entend铆 de maravilla explicas muy bien nacho!

esto es una maravilla 鉂わ笍

Excelente, muy bien explicado

Component:
Caracter铆sticas de Vue que permiten extender elementos HTML b谩sicos para encapsular c贸digo re utilizable. Son elementos personalizados a los que el compilador de Vue les a帽ade comportamiento

El problema viene a la hora de pasar la data de un componente o muchos componentes arriba o abajo D:

Que gran curso, yo no sabia que se pod铆an crear nuevos componentes con tanta facilidad

Excelente clase, quedo muy claro como funciona y como se estructura un componente.

No saben lo feliz que me puse al lograrlo :3

Vue.component('counter', {
  data(){
    return{
      counter: 0,
    }
  },
  methods:{
    count(){
      this.counter++
    }
  },
  template: `
    <div>
      <button @click="count"> Click Me! - {{ counter }}</button>
    </div>
  `
})

Vue es maravilloso!

Los componentes son porciones de tu codigo que te ayudan a organizar tu proyecto!!!

Componentes

La funci贸n Vue.component() nos permite registrar un componente nuevo y asignarle un nombre, el 1er par谩metro de la funci贸n es el nombre del componente y el 2ndo par谩metro es un objeto. Dentro del objeto se pueden disponer de las mismas configuraciones utilizadas dentro de la instancia de Vue, se puede disponer de data, methods, computed.

vue.component('counter', {
  data () {
    return {
      counter: 0
    }
  }
})

new Vue({
  el: '#app',

  data() {
    return {
      title: 'Hola Vue!'
    }
  }
})

La propiedad template, permite definir el template el que va a tener el componente, es decir el HTML que va a tener el componente en formato de string. Para ello se utilizan los storing literals y se escribe dentro de ellos el c贸digo HTML.

Counter no es una etiqueta HTML v谩lida, a trav茅s de Vue es posible crear nuestros propios tags HTML, agrupar componentes en comportamientos similares y el poder reutilizar 茅ste c贸digo a lo largo de la aplicaci贸n, todas las veces que se quiera.

Vue.component('counter', {
  data () {
    return {
      counter: 0
    }
  },

  template: `
    <div>
      <button>Click me!</button>
      <span>{{ counter }}</span>
    </div>
  `

})

En el HTML:

<div id="app">
  <h1>{{ title }}</h1>
  <counter></counter>
</div>

Dentro del template se tiene sin div que act煤a como contenedor, es importante, ya que Vue exige tener un 煤nico elemento padre al momento de crear nuestros propios componentes. De la misma forma que en la aplicaci贸n de Vue, todo depende del div que tiene el div app, con los componentes se mantiene la estructura de 谩rbol, se tiene una 煤nica ruta o elemento llamado Root, donde todos los elementos son hijos de ese elemento padre.

Siempre tendremos una 煤nica instancia Vue que es la que representa a nuestra aplicaci贸n y los componentes que se vayan creando posteriormente dependen de esa instancia.

Se utiliz贸 la funci贸n Vue.component() para registrar y crear un componente nuevo. Se le asigna un nombre, que es el que se utiliza en el HTML, y finalmente se le asigna un objeto, que tiene pr谩cticamente la misma estructura de la instancia de Vue, tiene las propiedades data, methods y template donde se puede definir las etiquetas HTML que van a definir al componente.

Finalmente se incluye el nuevo componente en el HTML con el nombre asignado.

Para crear un componente se empieza por utilizar la propiedad component de Vue, que recibe el nombre del componente y su propio objeto de configuraci贸n.

Dentro del objeto se puede usar una nueva propiedad llamada template, que es b谩sicamente la estructura HTML propia del componente. Se define dentro de string literals.

Cabe mencionar que el template debe tener un 煤nico elemento padre, en t茅rminos pr谩cticos significa que debe estar todo dentro de un div.

Hola colegas.

Existe un curso de webcomponents en platzi para tener mejor entendimiento acerca del tema de los compoenntes Custom

Me gusta modularizar mi c贸digo, y que cada componente se pueda volver a utilizar.

llevo muy poco aprendiendo VUE , el curso va bien!

驴C贸mo hago para que la la template no este en string literal, sino en un template html?

Excelente!

Felicidades al instructor. He entendido los conceptos b谩sicos

Vue.component('name', {

})
Vue.component("componentName", {
	data() {
		return {

		}
	},
	methods: {

	},
	template: `

`
})

Al nombrar el componente quise ponerle 鈥渇ooter鈥 y no me dej贸. Supongo que por ser una etiqueta reservada. Lo que hice fue crear la etiqueta <footer> y dentro crear otra llamada <mifooter></mifooter> y todo funcion贸 bien.

Profesor muy bueno, me gusta la manera de como explica, alguien tendr谩 el dato de que otros cursos imparte?

Por lo que entiendo, un componente custom es como un nuevo Vue dentro de el Vue principal o root.

馃く馃く Puede que no sea Vue exactamente ya que no he visto los dem谩s cursos como Angular o React, Pero siempre me preguntaba cuando ve铆a el c贸digo de alguna pagina pro, porque tenia esos nombres las etiquetas, Esto ya me hace un dia de como lo manejan, Genial 鈾

Hola Nacho , anteriormente data no tenia las par茅ntesis cuando lo declarabas a que se debe el cambio ?

Me encanta, EL TEMA de componentes, mi duda es que en backend yo utilizo django 3, pero todavia no quiero usar vue cli, as{i que de esta forma en que me beneficiar铆a usar vue en vez de jquery o js vanila?

Muchas gracias profe, puede comprender todo a la perfeccion

como su nombre dice componentes separa el codigo en componentes para que sea m谩s facil el trabajo

Excelente curso hasta el momento !!! pr谩ctico y directo 鈥︷煈忦煈

podemos acortar el m茅todo auto sumando la variables el mismo componente

馃憣

si hacen esto entender谩n porq es un componente reutilizable.

<div id="app">
  <h1>{{title}}</h1>
  <counter></counter>
  <counter></counter>
  <counter></counter>
</div>

asta ahora me va gustando el curso 鈾 10/10 facil de entender

En algunos ejemplos en otros c贸digos he encontrado que cuando usan la directiva v-on:click tambi茅n la utilizan v-on:click.native 驴alguien tiene alguna explicaci贸n de este tipo de propiedad?

Esto es maravilloso