Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Custom events o eventos personalizados con Options API

28/37
Recursos

Aportes 5

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

En Vue la comunicación de hijos a padres se hace a través de eventos, algo cool de esto es que podemos aprovecharnos de dichos eventos para hacer un componente controlado.
.
Un componente controlado es básicamente un componente hijo que tú puedes crear y sincronizar el valor que este emite al de alguna propiedad de data del padre, tal cual como si fuese un input, por ejemplo, con un input tú puedes usar v-model para ligar una propiedad de data a un input, y cada que ese input cambiar el valor en data() también cambia, podemos lograr el mismo efecto con un componente controlado.
.
Por ejemplo, podemos crear un componente que sea un slider personalizado con HTML y CSS y que dicho componente emita un valor cada que sea modificado y se sincronice con alguna propiedad de data(). Y lo mejor es que también podemos usar v-model para componentes controlados.
.
v-model es un shorthand para el paso de una propiedad por parte del padre y la emisión del evento de la misma propiedad por parte del hijo, un ejemplo para explicarlo mejor:
.

<ChildComponent v-model="pageTitle" />

<!-- Sería un shorthand para: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Como pueden ver, cada vez que dentro del componente hijo se desencadene algún evento, este le mandará a su padre la información de pageTitle actualizada a través del evento emitido @update:modelValue, y el padre a su vez se la regresará al hijo para sincronizarse a través del :modelValue, así se logra un componente controlado. Esto está en la documentación oficial de Vue 3:
.
https://v3.vuejs.org/guide/migration/v-model.html#v-model
.
En Vue 2 también se puede hacer, pero la sintaxis cambia, tengo un tutorial en otro curso de Vue explicando cómo hacer componentes controlados tanto en Vue 2 como en Vue 3 con Options API:
.
Cómo usar los componentes controlados en Vue 3
.
Pero, por si te da pereza ir hasta el tutorial, puedes mirarlo aquí 👀👇

1.llamar un metodo sendToCart en el button añadir carrito

@click="sendTocart()"

2.declarar emit:

emits:["sendtocart"]

3.hacer el método sendToCart

sendTocart(){
        this.$emit("sendtocart", this.product)
      }

4.en index usar sendtocart como evento

@sendtocart="addToCart($event)"

Los props no pueden ser mutados o actualizados desde el padre, pero al parecer sólo aplica para tipos primitivos, lo que son objetos y arreglos si se pueden editar porque pasan como referencia.

Como sugerencia es mejor evitar llamar todo de la misma forma cuando se esta enseñando, sobre todo para evitar confusiones, y poder reconocer efectivamente que se esta conectando con qué.

Es muy parecido a como lo trabaja Angular