Componentes Controlados y Variables Personalizadas

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

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,

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…

Un tema sencillo con una explicación complicada

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

<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

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í

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 😉

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

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

Para hacer esto en vue3 pueden revisar este comentario

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

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

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

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>````

parte en que empieza a hacer el v-model

Custom model

Custom model prop names

Me toco ver dos veces el video, pero ya entendí como funciona bien los eventos del hijo que se envían al podre y como estos se escuchan

Si entendí bien v-model sirve para evitar datos (props para el hijo) y escuchar el evento emitido por el hijo? Poniendo las propiedades de model en el hijo cierto, para especificar cuál es prop y cuál el evento a emitir?

Excelente no sabía que podía aplicar v-model en custom components! A aplicarlo desde ahora!

Excelente clase, no sabia que podia usar v-modal para componentes persoanlizados. Pensaba que unicamente se podia usar en campos Inputs. Ahora voy a utilizarlos y a crear personalizados en lugar de utilizar por default value y emit input. Desconocia por completo model dentro del componente vue.