Vue.js 2 Design Patterns and Best Practices

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.