Introducción
¿Qué es Vue.js?
Fundamentos de componentes
Configuración del entorno
Primer contacto
Renderizado declarativo
Interpolación de datos
Interpolación de datos 2
Atributos reactivos
Input de usuario
Eventos de usuario
Inputs reactivos
Reactividad
Propiedades computadas
Watchers
Estilos reactivos
Listas y condicionales
Condicionales
Listas
Componentes personalizados
Componentes
Slots
Comunicación entre componentes
Comunicación de componente padre a hijo
Comunicación de componente hijo a padre
Custom v-model
Comunicación con componentes profundos
Componentes en el Virtual DOM
Instancias de componentes
Cierre del curso
Vue progresivo
Esto es solo el comienzo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 11
Preguntas 4
El español es un idioma muy rico, los programadores manejamos dos, recomiendo a la hora se enseñar no repetir el mismo nombre, porque los que estamos aprendiendo no sabemos a funcion corresponde la logica
Porejemplo colocaste input mas de 4 veces, cuando pudste colocar, entrada, y luego entradaHija, enrtadaPAdre, y demas… eso es mas ordenado para nuestras cabezas
En los caso en que el padre necesite saber el estado de la alguna data del su componente hijo, se tiene que hacer la vinculación con v-model.
.
Este v-model es personalizado, pues el nombre de este será igual al nombre del prop ubicado en props.
.
En el caso de los inputs se necesita hacer uso del v-bind de value, asi como de un metodo que dispare el evento “update:propName”, junto con la data para que se logre esta reactividad que estara presente tanto en la data del padre como en las props del hijo.
.
Para alguien vea una aplicación vue por primera vez, creo que se haría difícil entender solo nociones de html y javascript el código usando el v-model custom.
De la otra forma, si lograría inferir un poco de como se comunican los componentes, ya que se puede guiar por el nombre de los métodos y propiedades
jeje, no me maten, es solo una opinión, de igual forma implementar v-model custom nos ayuda a simplificar el código en el componente padre.
mi código: 19customv-model.html
Permite una comunicacion en dos sentidos entre el padre y el hijo, se debe especificar el prop del componente y la variable involucrada: v-model:propValue="variableValue"
ejemplo:
app.component("v-input",{
props: {
inputValue: String
},
methods:{
changeInput(e){
this.$emit("update:inputValue",e.target.value)
}
},
template:`
<input
type="text"
v-bind:value="inputValue"
v-on:input="changeInput"
/>
`
} )
Se crea un componente para ser llamado en el template principal:
template:`
<div>
<p>{{ text }}</p>
<v-input
v-model:inputValue="text"
/>
</div>
`
Nótese cómo se usa v-model
Todos mis apuntes en mi github
Deberían de planear mejor las clases, los errores los veo bien ya que todos vamos a tener errores a la hora de desarrollar pero como dice el comentario de @andresmu : Hay muchos nombres input y luego el update que no sé en qué momento es opcional o por qué lo puso o por qué dice que ahora si es obligatorio… de por sí el tema es difícil de entender, ahora más si no planean bien las clases para evitar este tipo de detalles.
toda la documentación sobre los eventos en Vue
v-model te salvara la vida mas de una ves.
primer aviso
Apuntes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Hello Vue!'
}
},
methods: {
inputFather(value) {
this.text = value
}
},
template: `
<div>
<p>{{text}}{{value}}</script>
</body>
</html>
Muy interesante el la explicación del v-model es una de las directivas que mas me costo entender de Vue
<template>
<div>
<input
type="text"
:value="value"
@input="updateValue($event.target.value)"
:class="{'invalid':hasError}"
/> <!-- :value es el prop(comunicacion de padre a hijo)
@input se utiliza para escuchar el evento "input" en un elemento de entrada de datos.
Cuando se dispara el evento "input" (por ejemplo, cuando el usuario escribe en un campo de entrada),
se ejecutará updateValue en la directiva v-on:input
-->
<span v-if="hasError" class="error-message">{{errorMessage}}</span>
</div>
</template>
<script>
export default {
name: 'CustomImput',
data(){
return{
error: false,
errorMessage: ''
}
},
props: ['value'],
methods:{
updateValue(newValue){
//Logica de la validacion
if(newValue.length > 10){
this.error = true;
this.errorMessage = 'El texto no puede tener mas de 10 caracteres'
}else{
this.error = false;
this.errorMessage = ''
this.$emit('update',newValue) /* Este input es el nombre del evento personalizado que se le pasa al padre */
}
}
},
computed:{
hasError(){
return this.error && this.errorMessage !== ''
}
}
};
</script>
<style>
.invalid {
border-color: red;
}
.error-message {
color: red;
font-size: 12px;
}
</style>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.