📊 Capítulo 05: defineProps, defineEmits & defineModel

Especialização em Frontend com Vue.js

🗺️ O Fluxo de Comunicação de Componentes com Compilador Macros

flowchart TD
    PAI["Componente Pai"]
    --> |":titulo='meuTitulo'"| PROPS["defineProps<{ titulo: string; preco?: number }>()"]
    PROPS --> FILHO["Componente Filho (Consome props no template ou script)"]
    FILHO --> |"emit('atualizar', novoValor)"| EMITS["defineEmits<{ (e: 'atualizar', val: number): void }>()"]
    EMITS --> |"@atualizar='onAtualizar($event)'"| PAI
    PAI <--> |"v-model='filtro' (Two-Way Sincronizado!)"| MODEL["defineModel<string>() (Vue 3.4+)"]

    style PAI fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style PROPS fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style FILHO fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style EMITS fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style MODEL fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

🎯 Slide 1: defineProps com TypeScript Puro

interface Props {
  titulo: string;
  ativo?: boolean;
}

// Valores padrão elegantes com withDefaults:
const props = withDefaults(defineProps<Props>(), {
  ativo: true
});

🎯 Slide 2: O Revolucionário defineModel (Vue 3.4+)

• Antes: Você precisava declarar defineProps(['modelValue']) e defineEmits(['update:modelValue']).

• Agora com defineModel:

  const model = defineModel<string>({ required: true });
  // Modificar model.value atualiza automaticamente o pai com v-model!
  

🎯 Slide 3: Injeção Profunda com provide e inject

• Permite passar dados do topo da árvore de componentes para um bisneto sem passar props manualmente por todos os nós intermediários (evita Prop Drilling)!