3👍
✅
You can consider the $emit
as an event that contains some data. Here is a fast example of how to get data back to parent using $emit
:
Parent Component:
<ParentComponent>
...
<ChildComponent @onEmitEvent="handleEmitEvent($event)">
</ChildComponent>
...
methods: {
handleEmitEvent(dataFromChild){
// HANDLE THE DATA HERE
}
}
</ParentComponent>
Child Component:
<ChildComponent>
...
...
<!-- element that will send the data back to ParentComponent -->
<!-- I am using VueMaterial so for me it will be something like: -->
<!-- <md-button @click="sendDataToParentComponent(data)"> -->
...
...
methods: {
sendDataToParentComponent(data){
// FOLLOWING LINE WILL SEND THE "data" OBJECT TO THE PARENT
this.$emit("onEmitEvent", data);
}
}
</ParentComponent>
Accessing the data on the parent level is the same as you handle the Object
itself. You can also send "complicated objects" as:
sendDataToParentComponent(data){
// FOLLOWING LINE WILL SEND THE "data" OBJECT TO THE PARENT
this.$emit("onEmitEvent", {data: dataObject, addObject: true);
}
And on the the parent level you will have:
handleEmitEvent(dataFromChild){
// dataObject
dataFromChild.data
// addObject
dataFromChild.addObject
}
Source:stackexchange.com