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>