What is Vue's component communication patterns?

Components communicate through several patterns based on their relationship: 1. Parent → Child: Props. Pass data down via props. Child receives and displays/uses them. 2. Child → Parent: Emits. Child emits custom events; parent listens with v-on/@. defineEmits(["update"]); emit("update", data); — parent: @update="handler". 3. v-model: Two-way binding. Combines props + emit for form-like components. 4. Provide/Inject: Ancestor → Any Descendant. Provider component provides data; any descendant can inject without prop drilling. Useful for global config, themes, form contexts. 5. Pinia/Vuex: Global State. Shared state store accessible from any component. Best for app-wide data (user, cart, notifications). 6. Template refs: Direct component access. Parent accesses child's exposed methods via ref. 7. Event bus (anti-pattern for Vue 3): Vue 2 used a Vue instance as a global event bus. In Vue 3 (no separate Vue instance), use: a tiny mitt library, Pinia actions, or provide/inject with a reactive EventEmitter. 8. Composables with shared state: a composable can hold module-level reactive state shared across all uses: const state = ref([]); export function useSharedList() { return { list: state, add: (item) => state.value.push(item) }; }. All components using this composable share the same state. 9. Props drilling alternative: for deeply nested data, prefer provide/inject or Pinia over passing props through many layers.