Vue $emit() method
Using the $emit() method built in Vue, we can create a custom event in the child component that can be captured in the parent element.
Props is used to send data from the parent element to the child component, while $emit() is used to perform the opposite: pass information from the child component to the parent component.
The purpose of what we next is to eventually change the “favorite” state of the food in the parent, not in the currently changing child components.
The reason why you change the favorite state in , instead of in , is that it is the storage location of the favorite state and therefore needs to be updated. In larger projects, the data may come from the database we are connecting to, and we want changes in the component to be changed in the database, so we need to communicate from the child component to the parent component.
Publish custom events
The information needs to be sent from the component to the parent, we use the built-in method $emit() to do this.
We already have the toggleFavorite method in the component, which runs when the toggle button is clicked. Now let's delete the existing row and add a row to emit our custom event "toggle-favorite":
：
methods: {
toggleFavorite() {
// = !;
this.$emit('toggle-Favorite');
}
}
We can choose the name of the custom event, but it is normal to emit the event using short horizontal line naming.
Receive a transmit event
The custom launch event "toggle-favorite" is now launched from the component, but we need to listen to the event in the parent and call a method that performs some operations so that we can see that the event has occurred.
In creating components, we use the abbreviation @ instead of v-on: to listen for events:
Example Get your own Vue server
Listen to the ‘toggle-favorite’ event in
<food-item v-for="x in foods" :key="" :food-name="" :food-desc="" :is-favorite="" @toggle-favorite="receiveEmit" />
When our custom 'toggle-favorite' event occurs, we need to create the acceptEmit method in , so that we can see that the event has occurred:
methods: {
receiveEmit() {
alert('Hello World!');
}
}
Change the "favorite" status of a food item in the parent component
We now have an event that will notify when the "favorite" button is clicked from the child component.
When clicking the "favorite" button, we want to change the "favorite" property in the "foods" array to the correct food item. To do this, we send the food item name from , because the name of each food item is unique:
:
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', );
}
}
We can now receive the food name in it as a parameter to the method called when the ‘toggle-favorite’ event occurs, as follows:
Example
:
methods: {
receiveEmit(foodId) {
alert('You clicked:'+foodId);
}
}
Now that we know the food being clicked, we can update the 'favorite' status of the correct food in the 'foods' array:
:
methods: {
receiveEmit(foodId) {
const foundFood = (
food => ===foodId
);
= !;
}
}
In the above code, the array method "find" goes through the "foods" array and looks for an object whose name attribute is equal to the food item we clicked and returns that object as "foundFood". After that, we can set "" to the opposite value from before so that it toggles between true and false .
The correct food in the "foods" array now updates its "favorite" status. The only thing left is to update the images indicating favorite food.
Because the food component is already created using the "favorite" state from the "foods" array and sent as a prop "is-favorite" from , we simply refer to this "isFavorite" prop in v-show, where<img>Elements are used to update images:
<img src="/img_quality.svg" v-show="isFavorite">
We can also delete the "foodIsFavorite" data attribute in , as it is no longer used.
Example
In this last example code, the food's favorite state can be switched in a similar way as before, but now the favorite state is modified in the correct position within .
"emits" option
In the way we declare props within the component, we can also use the Vue "emits" option to record what the component is emitted.
Props must be declared in the component, while emits is recommended to log it.
This is how we record emit in the component
<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
emits: ['toggle-favorite'],
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', );
}
}
};
</script>
When emits is recorded, it is easier for others to use the component.
Summarize
This is the end of this article about the detailed explanation of the Vue $emit() method that must be known to the front-end. For more related contents of the Vue $emit() method, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!