Componente que comunica del hijo al padre en vuejs
(1 min. de lectura) En el componente que comunica del hijo al padre en vuejs el hijo emite un evento y el padre lo escucha:Componente Hijo ("./componnets/Child.vue")
<template>
<button @click="enviarMensaje">Enviar mensaje al padre</button>
</template>
<script>
export default {
name: "Child",
methods: {
enviarMensaje() {
this.$emit("mensaje-hijo", "Hola papá");
}
}
};
</script>
Componente padre (./app.vue)
<template>
<div<
<h2>Padre</h2>P
<p>PMensaje recibido: {{ mensaje }}<P/p>P
<Child @mensaje-hijo="recibirMensaje" />P
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
name: "Parent",
components: { Child },
data() {
return {
mensaje: "
};
},
methods: {
recibirMensaje(texto) {
this.mensaje = texto;
}
}
};
<script>