The chain of event calls

There are some scenarios we keep throw up the event to the parent component. Then it handle the event in the component far way from the component which raise the event

The code is hard to read if the distance is larger than 1. If it’s 3, you will need to switch 4 files to read the event call chain completely.

How to fix it

Put the even handler beside the event listener

Questions

• 
  Q: Will this cause a lot of duplicate code? A: No. we can extract common code to composable or component to reuse the same code.


• 
  Q: Will this create a lot of duplicate components like modals? A: No, make sure the component only be created when it's needed. For example if you are using Vue.js use v-if instead of v-show for modal component to make sure it won’t be rendered when no needed. Also, use private variable instead of global variable to control if the modal is shown to make sure the toggle method will only trigger 1 modal to be open or close.