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 props sã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:

@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>
   :class="attrs.class">
    
  
template>

<script>
export default {
  setup(props, { attrs }) {
    return { attrs }
  }
}
script>
class="minha-classe">
  Conteúdo dinâmico aqui!