Componente que comunica del hijo al padre en vuejs

<template>
  <button @click="enviarMensaje">Enviar mensaje al padre</button>
</template>

<script>

export default {
  name: "Child",
  methods: {
enviarMensaje() {
 this.$emit("mensaje-hijo", "Hola papá");
}
  }
};
</script>

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