There are many ways for components to communicate within Vue, such as the use of props, events, and store-based scenarios. Vue also gives us access to $parent and $children objects, which allow us to interact with parent/child components. Let's take a look at this and see why it shouldn't be used.
Imagine that we had our familiar TodoList example, and within the TodoItem component, we want the ability to complete a particular Todo. If we wanted to keep our todos within the TodoList and thus call the completed method from TodoItem, we could do it like this:
export default {
props: ['todo'],
methods: {
completeTodo(todo) {
this.$parent.$options.methods.completeTodo(todo);
}
}
}This is a bad idea for numerous reasons, mostly because we're tightly coupling these two components together and assuming that there will always be a completeTodo method on the parent component.