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