How to Modify Parent Component Data from a Child Component in Vue.js Using emit
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Table of Contents for Vue Articles Here
This article explains how to modify parent component data from a child component in Vue.js using emit.
Modifying Parent Component Data from a Child Component
Here, we will modify a count data value in the parent component from a child component.
Parent Component
<template>
<ChildrenComponent @custom-event="handleEvent" :count="count" />
</template>
<script setup>
import { ref } from "vue"
const count = ref(0)
const handleEvent = () => {
count.value++
}
</script>Child Component
Since the parent component uses @custom-event, we can emit an event with the name custom-event here.
<template>
<div>
<button @click.stop="triggerEvent">Press to Increase Count</button>
<div>Count: {{ count }}</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue"
// Define props
const props = defineProps({
count: Number,
})
// Define emit
const emit = defineEmits(["custom-event"])
const triggerEvent = () => {
emit("custom-event")
}
</script>What is emit?
In Vue.js, emit is a mechanism that allows child components to send events to parent components.
In short, it lets you use events defined in the parent component within the child component.
While data transfer from parent to child is done using props, directly modifying the parent component’s data from a child component is discouraged. Instead, we use emit to trigger an event in the parent component, which updates the parent’s data accordingly, as shown here.
Using Arguments
Parent Component
<template>
<ChildrenComponent @custom-event="handleEvent" :count="count" />
</template>
<script setup>
import { ref } from "vue"
const count = ref(0)
const handleEvent = increment => {
count.value += increment
}
</script>The only change here is adding an argument to handleEvent.
Child Component
<template>
<div>
<button @click.stop="triggerEvent(1)">Press to Increase Count by 1</button>
<button @click.stop="triggerEvent(2)">Press to Increase Count by 2</button>
<button @click.stop="triggerEvent(3)">Press to Increase Count by 3</button>
<div>Count: {{ count }}</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue"
// Define props
const props = defineProps({
count: Number,
})
// Define emit
const emit = defineEmits(["custom-event"])
const triggerEvent = increment => {
emit("custom-event", increment)
}
</script>Here, we added an argument to the triggerEvent function and the buttons.
You can specify arguments after the event name, like this:
emit("custom-event", increment)Passing Multiple Arguments
You can pass multiple arguments by adding them like this:
const triggerEvent = (increment, decrement) => {
emit("custom-event", increment, decrement)
}You could also pass them as an object:
const triggerEvent = (increment, decrement) => {
const obj = {
increment: increment,
decrement: decrement,
}
emit("custom-event", obj)
}Feel free to use whichever method fits your situation.
When Using Vue 2
In Vue 2, the $emit method is used to pass data from a child component to a parent component.
Unlike Vue 3, Vue 2 does not have the setup function or Composition API, so implementation relies on the traditional Options API.
In the parent component, you define an event listener. The child component triggers this event with $emit, and the parent component processes the received data.
Parent Component
<template>
<children-component
@custom-event="handleEvent"
:count="count"
></children-component>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
methods: {
handleEvent() {
this.count++
},
},
}
</script>Child Component
<template>
<div>
<button @click="$emit('custom-event')">Click to increase count</button>
<div>Count: {{ count }}</div>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
required: true,
},
},
}
</script>In this way, data exchange between parent and child components in Vue 2 is handled by defining methods and data in the Options API.
Summary
This was a method for updating parent component data from a child component.
It mostly involved the usage of emit.
For more in-depth information, the documentation is a great resource to explore further.
