Propiedades y eventos y bases de la comunicación entre componentes.
Abordaremos los temas a nivel intermedio de Vue.js
Las propiedades son las variables que se le pasan al componente para instanciarlo. De esta manera podemos parametrizarlo para reutilizarlo. Pueden ser requeridas o no, además podemos tiparlas o darles un valor por defecto. También podemos validarlas para filtrar el valor asignado.
// Mis propiedades
// Mis propiedades
props: {
// count: Number, podemos definirla en una sola linea o con más opciones...
titulo: {
type: String, // Tipo de dato
default: 'Contador', // valor por defecto (opcional)
required: true, // es obligatorio pasarselo (opcional)
},
started: {
type: Number,
default: 0,
required: true,
// Validaro es opcional
validator(value) {
return value >= 2
},
},
},De la misma manera que las propiedades nos sirven para pasar valores del padre al hijo, los eventos nos sirven para pasar valores del hijo al padre. Usaremos emits para hacerlo.
// desde el componente hijo que emite el evento
// eventos que emito hay que anunciarlos
emits: ['question-response'],
//...
// Mandamos el evento y su parámetro, si lo hay
this.$emit('question-response', this.answer)// desde el padre lo recogemos, como un evento normal y lo procesamos
<Indecision @question-response="callbackQuestionResponse" />
//...
methods: {
callbackQuestionResponse(data) {
console.log('He recibido el evento: ', data)
},
},- Padre a hijo: Usa propiedades
- Hijo a padre: Usa eventos
- Si la cosa se complica o hay muchos saltos, usa una store (lo veremos en conceptos avanzados)
Saber el ciclo de vida de un componente nos ayuda a saber como usar los hooks y con ellos disparar acciones asociadas al ciclo de vida del componente. Como son beforeCreated() => created() => beforeMount() => mounted() => beforeUpdate() => updated(), beforeUnmount(), unmounted().
Para la options API que veremos más adelante, usaremos: https://vuejs.org/api/composition-api-lifecycle.html
Podemos hacer uso de ellos por ejemplo poniendo : y el valor de la propiedad que queremos usar. Por ejemplo si queremos que una imagen o texto cambie en función de una propiedad, podemos usarlo:
<img :src="image" alt="imagen" />Es una ampliación del anterior. En Vue.js podemos usar clases y estilos condicionales de CSS y de esta manera podemos cambiar el aspecto de un componente en función de su estado.
data() {
return {
isActive: true,
hasError: false
}
}<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div><div class="static active"></div>Podemos hacer referencias a cualquier elemento del DOM del template usando ref. De esta manera podemos acceder a él desde el script y hacer lo que queramos con él. Por ejemplo, podemos usarlo para hacer focus en un input.
<input ref="input">this.$refs.input.focus()Los slots nos permiten pasar un template o código html a un componente. De esta manera podemos tener un componente y nosotros pasar el aspecto que se quiera, es decir, personalizar su template.
Sin embargo, hay casos en los que podría ser útil si el contenido de un slot puede hacer uso de datos tanto del ámbito principal como del secundario. Para lograr eso, necesitamos una forma de que se pasen datos entre ambos. Son los scoped slots.
<MyComponent v-slot="slotProps">
{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>Este tema tiene varios ejercicios, puedes realizarlos aquí
Codificado con 💖 por José Luis González Sánchez.
Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.
Este repositorio y todo su contenido está licenciado bajo licencia Creative Commons, si desea saber más, vea la LICENSE. Por favor si compartes, usas o modificas este proyecto cita a su autor, y usa las mismas condiciones para su uso docente, formativo o educativo y no comercial.
JoseLuisGS by José Luis González Sánchez is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.
Creado a partir de la obra en https://github.com/joseluisgs.
