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>