Normalmente, quando queremos passar dados de um componente pai para um componente filho, usamos props. O Vue.js tornou isso simples e fácil de fazer. Mas provavelmente já sentimos frustração em algum momento quando precisamos passar dados de um componente de nível pai para um componente filho profundamente aninhado.
Se fôssemos usar adereços, acabaríamos passando os dados para cada componente em cada nível da árvore de componentes do Vue para que os dados chegassem ao seu destino final. Isso é chamado de perfuração de suporte e pode fazer com que nosso aplicativo pareça mais complexo do que é. E se fosse um aplicativo com um estado simples, usar Vuex nele seria um exagero.
Felizmente para nós, o Vue tem a API fornecer / injetar e, com a introdução da API de composição no Vue 3, nunca foi melhor.
Usando o par fornecer e injetar , os componentes pais podem enviar dados para seus componentes filhos, independentemente da profundidade da hierarquia do componente. O componente pai tem uma função fornecer para fornecer dados, e o componente filho tem uma função injetar para começar a usar esses dados.
Na imagem acima, temos três níveis de componentes filhos. Os dados que queremos passar estão contidos no componente pai e o destino desejado para os dados está profundamente aninhado no terceiro nível da árvore do componente. Poderíamos conseguir isso usando adereços, mas às custas da simplicidade e legibilidade do nosso código. Vamos ver como podemos fazer isso sem sacrificar nenhum dos dois.
Primeiro, precisamos instalar a versão mais recente do Vue CLI v4.5 com o comando abaixo:
yarn global add @ vue/cli @ next #OU npm install-g @ vue/cli @ next
Execute o comando abaixo para criar um novo aplicativo Vue:
vue criar fornecer-injetar-tutorial
Usando a API fornecer
A API fornecer é uma função que usamos para definir os dados que queremos passar para um componente filho.
Ao usar a função fornecer em setup () , começamos importando explicitamente a função de vue . Isso nos permite definir cada propriedade quando fornecer é chamado.
A função fornecer aceita dois parâmetros:
- O nome da propriedade (uma string)
- O valor da propriedade (uma string ou um objeto contendo vários valores)
Depois de importar a função fornecer no código acima, nós a invocamos dentro da função setup . Em seguida, passamos os parâmetros para a primeira função fornecer da seguinte maneira: o nome da propriedade 'local' e um único valor, 'Pólo Norte'.
Para a segunda função fornecer , passamos um objeto contendo os valores de latitude e longitude e definimos seu nome de propriedade como 'geolocalização'.
Usando a API inject
A API inject é uma função que usamos para receber dados de nosso componente de provedor.
Como fizemos com a função fornecer , também temos que importar a função injetar de vue . Isso nos permite chamar e usar a função em qualquer lugar em nosso componente.
A função injetar leva dois parâmetros:
- O nome da propriedade que está sendo injetada
- Um valor padrão opcional
Vamos dar uma olhada no código abaixo:
Primeiro, importamos a função injetar em nosso componente MyMarker . Então, dentro de nossa função setup , atribuímos a primeira função fornecer um nome de propriedade 'location' ao userLocation variável. Também fornecemos um valor de fallback padrão opcional, 'The Universe'.
Em seguida, atribuímos a segunda função fornecer com um nome de propriedade de 'geolocalização' à variável userGeoLocation . Nós retornamos as variáveis userLocation e userGeoLocation , após o que estamos livres para usar seus valores em qualquer lugar no MyMarker componente.
Tornando o par fornecer / injetar reativo
Infelizmente, direto da caixa, o par fornecer / injetar não é reativo. Felizmente, há uma maneira de fazer isso acontecer usando o reativa fornecida pela API Vue.
Primeiro temos que importá-los de vue , então invocamos a função ref ou reativa . Vamos definir seus parâmetros para serem os valores que queremos passar para o componente filho desejado e armazenar a função em uma variável. Em seguida, invocamos a função fornecer e passamos o nome da propriedade e seu valor.
Agora, se algo mudar em qualquer propriedade, o componente MyMarker também será atualizado automaticamente!
Agora podemos atualizar nosso código da seguinte maneira:
Depois de importar as funções ref e reativa , invocamos a função ref e damos a ela um parâmetro (o valor 'North Pole') e, em seguida, atribua a função ref à variável location .
Para a função reativa , nós a invocamos e passamos a ela um parâmetro na forma de um objeto. Em seguida, atribuímos a função reativa à variável geolocalização . Depois de fazer isso, podemos chamar a função fornecer e passar o nome da propriedade e o valor dos dados que queremos transmitir.
Na primeira função fornecer , definimos o nome da propriedade como 'local' e definimos seu valor igual a local , que é o valor que atribuímos à função ref .
Enquanto na segunda função fornecer , definimos seu nome de propriedade como 'geolocalização' e seu valor igual a geolocalização , que é o valor que atribuímos à função reativa .
Quando usar o par de funções fornecer / injetar
- Se o aplicativo tiver um estado bastante simples e usar Vuex seria um exagero
- Se seu aplicativo tiver muitos níveis de componentes e os componentes intermediários, não use os dados antes de serem passados para o componente desejado
- Se os dados forem usados apenas por alguns componentes. Mas se os dados forem usados por muitos mais componentes, o Vuex seria uma solução melhor
Aprendemos como usar o par de funções fornecer / injetar para passar dados entre componentes profundamente aninhados no Vue.js 3 com a API de composição. Abordamos como torná-lo reativo e também os diferentes casos de uso para quando você deve usá-lo. Para saber mais sobre o par de funções fornecer / injetar , visite a documentação oficial .
A postagem Usando fornecer / inject no Vue.js 3 com a API de composição apareceu primeiro no LogRocket Blog .
