Voltar para o blogVue.js
Boas práticas para componentes reutilizáveis
Como criar componentes Vue flexíveis com props, slots e eventos bem definidos, sem virar uma caixa de opções infinita.
6 min de leitura
Componentes reutilizáveis economizam tempo, mas só quando são fáceis de entender e de usar. Algumas práticas ajudam a chegar lá.
Props bem tipadas
Use defineProps com TypeScript e valores padrão com withDefaults. Props com nomes claros funcionam como documentação.
const props = withDefaults(
defineProps<{ variant?: "primary" | "ghost"; disabled?: boolean }>(),
{ variant: "primary", disabled: false },
);Slots em vez de props demais
Quando um componente começa a receber muitas props para variar o conteúdo, é sinal de que um slot resolveria melhor. Deixe quem usa o componente decidir o que vai dentro.
Eventos explícitos
Declare os eventos com defineEmits e evite alterar props diretamente. Para formulários, defineModel simplifica o v-model em componentes próprios.