Componentes Controlados y Variables Personalizadas

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

Resumen

Los componentes controlados nos ayudan a tener el control sobre diferentes partes de un componente a través de parámetros.

Podemos usar la propiedad v-model para conectar variables con componentes y personalizar el contenido de la aplicación. Sin embargo, toda la lógica de nuestros componentes quedan en un mismo lugar, lo que los hace más difícil reutilizar. Por lo tanto, vamos a crear un nuevo componente para cada parte o funcionalidad reutilizable de nuestra aplicación pero configurados de tal forma que la lógica es controlada por los componentes padres, no por el mismo componente.

Juan Castro

teacher•

Los componentes controlados son componentes super reutilizables que necesitan ser llamados por otros componentes para tener su lógica completa y funcionar correctamente.

Es como si dejaran algunos últimos detalles de implementación para después pero, en realidad, le dejan la tarea al componente papá para poder funcionar de formas diferentes de acuerdo a las necesidades de cada parte de la aplicación.

Checklist for Writing Highly Reusable Components in React and Vue

Jesús Miguel Quinto Teran

student•

Muchas gracias! Muy útil tu comentario.

Carlos Eduardo Gomez García

teacher•

Vale, con componentes también podemos hacer el TwoWay Data Binding, en donde para usar el v-model tenemos que lanzar un evento llamado "input" y escuchar una propiedad llamada "value",pero para no tener que usar siempre esos nombres, podemos personalizarlos usando la propiedad "model" que tiene Vue,

Anthony Will Solsol Soplin

student•

Y cuándo un componente no es controlado?

Alan Lapierre

student•

Se trata simplemente de hacer que el componente sea mas flexible y reutilizable. El termino "componente controlado" no se si es el adecuado, o si se usa de forma amplia. Los camponentes tienen entradas y salidas de datos (por medio de eventos) y mientras mas genéricos sean, mas fácil es usarlos dentro del mismo proyecto...o inclusive, en otros proyectos...

Carlos Eduardo Gomez García

teacher•

¿Esto ya no funciona en Vue 3 cierto? Cuando dejo el :value y el @input funciona, pero cuando cambio todo eso por el v-model ya no funciona...

Alex Camacho

teacher•

El curso ya tiene un tiempo, te recomiendo que para seguir crees el proyecto con vue2 para no tener tantos problemas.

Carlos Eduardo Gomez García

teacher•

@alexcamachogz No lo digo por seguir el curso, lo digo porque estoy haciendo un proyecto propio que usa Vue 3 y quise usar esto pero no me funcionó, es decir, usando :value y @input si funcional, pero cambiarlo por v-model ya no funciona, en Vue 2 si funciona

Alejandro González Reyes

student•

Alguien tiene recursos sobre este tema, el profe lo complicó demasiado y el tema se ve interesante

Edward Steven Ramos Palacios

teacher•

Ya probaste viendo la documentación oficial de vue?

brayan zamora

student•

https://vuejs.org/api/built-in-components.html#built-in-components

Carlos Villanueva A.

student•

Un tema sencillo con una explicación complicada

David Vargas Domínguez

student•


<toggle-input
	v-model="form.newsletter"
></toggle-input>

// hace lo mismo que...

<toggle-input
	:value="form.newsletter"
	@input="(value) => { this.form.newsletter = value }"
></toggle-input>

Dejo el link donde se explica más detalladamente https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

Jesus Olivares

student•

como haría en el caso que desee enviarle varios parametros desde el padre al hijo..? es decir como haria para recibir varios props. En ese caso no puedo usar v-model así

Nicolás Arias

student•

Si puedes, pero en el v-model tendrías que enviar un objeto, en este artículo lo hacen https://zaengle.com/blog/using-v-model-on-nested-vue-components

Derek Samuel Paúl Peña

student•

Por si desean profundizar más acerca de este tema del Data Binding, les dejo el siguiente enlace que apoya a esta clase: https://platzi.com/clases/1145-vuejs-profesional/7795-data-binding/ Espero que les sirva 😉

Jhon Sovero Sovero

student•

El profe no hace entender mucho, alguién tiene otros recursos para seguir aprendiendo, como videos o blogs que hablen de este tema?

Angel Cabrera

student•

Es un curso avanzado, si ya pasaste por el profesional y por el básico y has tenido práctica con Vue se puede entender facilmente lo que el prof. quiere explicar. Hacer componentes hijos que emitan eventos hacia el padre es tarea del día a día cuando se trabaja con Vue

Jesús Miguel Quinto Teran

student•

Excelente clase! Creería que es una de las mas útiles para entender el two way data binding vue. Gracias

brayan zamora

student•

Tutorial básico: https://medium.com/@kessiacastro/vue-js-tutorial-iniciando-com-componentes-4445b3eb0ffe

brayan zamora

student•

https://vuejs.org/api/built-in-components.html#built-in-components

Sebastián Buitrago

student•

Para hacer esto en vue3 pueden revisar este comentario

Sebastián Buitrago

student•

A ustedes esto no les marca error en css esta en el componente modal

	@apply absolute bg-white p-4 shadow-lg rounded;
}

Alejandro González Reyes

student•

Esta clase no le entendí nada. Bastaba con que dijiera que el v-model se comporta de forma distinta en los componentes hijos.

Carlos Fuentes

student•

Los estilos CSS del ToggleInput

`<style>
.toggle {
  position: relative;
  display: inline-block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 9999px;
  cursor: pointer;
  height: 1.5rem;
  width: 3rem;
}
.toggle:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 4px rgba(52, 144, 220, 0.5);
  box-shadow: 0 0 0 4px rgba(52, 144, 220, 0.5);
}
.toggle:before {
  display: inline-block;
  border-radius: 9999px;
  height: 100%;
  width: 100%;
  background-color: #dae1e7;
  content: "";
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.toggle[aria-checked="true"]:before {
  background-color: #3490dc;
}
.toggle:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 9999px;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fff;
  border-width: 1px;
  border-color: #dae1e7;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  content: "";
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.toggle[aria-checked="true"]:after {
  -webkit-transform: translateX(1.5rem);
  transform: translateX(1.5rem);
}
</style>````

David Wagner

student•

parte en que empieza a hacer el v-model

Nicolás Arias

student•

Custom model