Na Composition API, o setup() recebe dois argumentos: props e context.
🧩 1. Recebendo Props no setup()
O primeiro argumento do setup() sĂŁo as props recebidas pelo componente.
export default { props: { titulo: String }, setup(props) { console.log(props.titulo) // Acessa a prop 'titulo' return {} } } âś… As
propssĂŁo reativas! Mas nĂŁo podem ser diretamente modificadas (sĂŁo somente leitura).
đź’ˇ Exemplo com props:
export default { props: { nome: String }, setup(props) { const saudacao = `Olá, ${props.nome}!` return { saudacao } } } 🧩 2. Usando o Contexto
O segundo argumento é um objeto chamado context, que contém:
| Propriedade | Descrição |
|---|---|
attrs | Atributos passados ao componente que nĂŁo sĂŁo declarados como props como class ou id |
slots | Slots passados ao componente |
emit | Função para emitir eventos personalizados |
🔍 Exemplo:
export default { props: ['nome'], setup(props, context) { console.log(context.attrs) // { id: 'meu-componente' } (se não for uma prop) console.log(context.slots) // Acesso aos slots context.emit('clicado') // Emite evento return {} } } 📤 Emitindo eventos com emit
VocĂŞ pode emitir eventos personalizados usando context.emit.
export default { setup(props, { emit }) { const clicar = () => { emit('meu-evento') } return { clicar } } } E no template:
<MeuComponente @meu-evento="fazerAlgo" /> 📝 Resumo Rápido
| Item | Forma de Acesso | Observações |
|---|---|---|
| Props | setup(props) | Reativas e somente leitura |
| Atributos extras | context.attrs | NĂŁo declarados em props |
| Slots | context.slots | Acessa conteĂşdo dos slots |
| Emitir evento | context.emit() | Dispara eventos para o componente pai |
đź“Ś Dica: VocĂŞ pode desestruturar o segundo argumento:
setup(props, { emit, attrs, slots })
-> Adicional
🔄 Uso combinado de attrs e slots
<template> <div :class="attrs.class"> <slot></slot> </div> </template> <script> export default { setup(props, { attrs }) { return { attrs } } } </script> <MyComponent class="minha-classe"> <p>Conteúdo dinâmico aqui!</p> </MyComponent> 
Top comments (0)