Parent-child components' communication, events, and brain teaser

Remember our shopping list application? Do you remember our ChangeTitleComponent and how we ensured that typing in its input box would affect the title of the shopping list that belongs to the parent component? You remember that each component has its own scope, and the scope of the parent component cannot be affected by children components. Thus, in order to be able to propagate the changes from inside the children components to the parent components, we used events. Putting it very simply, you can call the $emit method from the child component with the name of the event being dispatched and listen to this event within the v-on directive on the parent component.

If it is a native event, such as input, it's even more simple. Just bind the needed attribute to the child component as a v-model and then call the $emit method with the name of the event (for example, input) from the child component.

Actually, this is exactly what we...