Como funciona o provide/inject no Vue 3?

No Vue 3, provide/inject é usado para transmitir dados ou dependências do componente pai para os filhos, evitando componentes intermédios.

• provide é declarado no componente pai e fornece valores.
• inject é usado nos componentes filhos para obter esses valores.

Isto é útil para transmitir configurações globais, serviços ou dados que os componentes profundamente aninhados precisam, sem precisar passar props por cada nível.

Exemplo:

// Componente pai
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Componente filho
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Assim, o componente filho tem acesso ao valor 'dark' fornecido pelo pai.