Vue $emit() Method
Example
Using the $emit() method to trigger a custom event to the parent component when the button is clicked.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
<button v-on:click="this.$emit('custom-event')">Trigger</button>
</div>
</template>
See more examples below.
Definition and Usage
The built-in $emit() method triggers a custom event that is used to communicate up to the parent component.
| Argument | Description |
|---|---|
| Custom event name | Default. This first argument is the name of the custom event triggered with the $emit() method. |
| More arguments | Optional. One or more arguments can be sent with the custom event as a payload. (See Example 1 and 2 below.) |
The emits option can be used to document what the component emits. Using the emits option improves readability, but it is not required. (See example 3 below.)
Props are used to communicate the opposite direction: from the parent component down to the child component. Read more about props in the tutorial.
More Examples
Example 1
Using the $emit() method to send a message to the parent component, with the 'message-sent' custom event.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Write something, and send the message up to the parent component using the $emit() method.</p>
<input type="text" v-model="message" placeholder="write something..">
<button v-on:click="send">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: null
}
},
methods: {
send() {
this.$emit('message-sent',this.message);
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
input {
display: block;
margin-bottom: 15px;
}
</style>
Example 2
Using the $emit() method to send a product name and rating to the parent component.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Rate a product:</p>
<input type="text" v-model="productName" placeholder="Product name.." ref="inpName">
<input type="number" v-model="productRating" placeholder="Rating 1 to 10..">
<button v-on:click="send">Register</button>
</div>
</template>
<script>
export default {
data() {
return {
productName: null,
productRating: null
}
},
methods: {
send() {
this.$emit('message-sent',this.productName,this.productRating);
this.productName = null;
this.productRating = null;
this.$refs.inpName.focus();
}
},
mounted() {
this.$refs.inpName.focus();
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
input {
display: block;
margin-bottom: 15px;
}
</style>
Example 3
Using the emits option to document what the component emits with the $emit() method. This not required, but it improves readability.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
<button v-on:click="this.$emit('custom-event')">Trigger</button>
</div>
</template>
<script>
export default {
emits: ['custom-event']
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
</style>
Related Pages
Vue Tutorial: Vue $emit() Method
Vue Tutorial: Vue Props
Vue Tutorial: Vue Events
Vue Tutorial: Vue v-on Directive
Vue Tutorial: Scoped Styling
