Custom Events — Vue.js | emit vue
ThispageassumesyouvealreadyreadtheComponentsBasics[1].Readthatfirstifyouarenewtocomponents.EmittingandListeningtoEvents[2]Acomponentcanemitcustomeventsdirectlyintemplateexpressions(e.g.inav-onhandler)usingthebuilt-in$emitmethod:templateThe$emit()methodisalsoavailableonthecomponentinstanceasthis.$emit():jsexportdefault{methods:{submit(){this.$emit(someEvent)}}}Theparentcanthenlistentoitusingv-on:template<...
This page assumes youve already read the Components Basics[1]. Read that first if you are new to components.
Emitting and Listening to Events [2]A component can emit custom events directly in template expressions (e.g. in a v-on handler) using the built-in $emit method:
template<!-- MyComponent --> <button @click="$emit(someEvent)">Click Me</button>The $emit() method is also available on the component instance as this.$emit():
jsexport default { methods: { submit() { this.$emit(someEvent) } } }The parent can then listen to it using v-on:
template<MyComponent @some-event="callback" />The .once modifier is also supported on component event listeners:
template<MyComponent @some-event.once="callback" />Like components and props, event names provide an automatic case transformation. Notice we emitted a camelCase event, but can listen for it using a kebab-cased listener in the parent. As with props casing[3], w...