Components

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.

Communication – Anti-pattern

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...