Avoid implicit communication between parent and child components, such as using `this.$parent`, `this.$root`, or directly mutating props received from the parent. Prefer explicit communication via props down and events up.
Implicit communication makes component relationships and data flow hard to understand and debug. It tightly couples components, making them brittle and difficult to refactor or reuse. The 'props down, events up' pattern creates a clear, predictable data flow that is easier to maintain.
Side-by-side examples engineers can pattern-match during review.
// BAD: Child accessing parent directly
this.$parent.doSomething();
// BAD: Child mutating prop (See vue/no-mutating-props rule)
export default {
props: ['todo'],
template: '<input v-model="todo.text">' // Mutates todo.text
}// GOOD: Child emits event, parent listens
// Child component:
this.$emit('delete-item', this.itemId);
// Parent template:
<child-component @delete-item="handleDelete"></child-component>
// GOOD: Using v-model for two-way binding (syntactic sugar for prop + event)
// Child component:
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)">'
}From the same buckets as this rule.
For changes that affect architecture, data models, external APIs, security posture, deployment topology, or cost (>10%), create an ADR in docs/adr/ using the standard template (Context, Decision, Consequences) and link the PR and issue IDs.