Vuejs 3 emit event from child to parent component

You should add the new emits option containing the emitted event names :

child :

<template>
  <div id="child">
    <button v-on:click="tryThis">Enlarge text</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Child",
  emits: ["enlargeText"],
  methods: {
    tryThis() {
      console.log("trying");
      this.$emit("enlargeText", "someValue");
    },
  },
});
</script>

Parent :

<template>
  <div>
    <p>Container</p>
    <Child @enlargeText="onEnlargeText" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "UrlContainer",
  components: {
    Child,
  },
  methods: {
    onEnlargeText() {
      console.log("enlarging text");
    },
  },
});
</script>

LIVE DEMO

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top