Children mutating props – Anti-pattern

It's important that we won't modify props inside our child components. Props should be considered the source of truth when passed down to a component and thus, change the value from within a child component is typically bad practice. There are some unique case scenarios however where it may be appropriate to do so, like when using the .sync modifier to achieve two-way data binding.

If we use our previous example and change the todos prop from within the child, we'll get a warning inside the console:

methods: {  completeTodo(todo) {    this.todo = [{id: 1, name: 'Do the dishes.'}];    this.$emit('completeTodo', todo)  }}

Get Vue.js 2 Design Patterns and Best Practices now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.