0

Bom,eu criei um Root Component chamado de Index.vue e nele eu registrei 3 components

<template>
  <v-app>
    <Login />
    <Agree />
    <Validation />
  </v-app>
</template>

<script>
export default {
  components:{
    Login: () => import('./components/Login'),
    Agree: () => import('./components/Agree-Term')
    Validation: () => import('./components/Validation')
  }
}
</script>

O que eu gostaria de fazer são transições, mas sem as "animações", bom, eu tenho uma transição dentro do componente Login, eu tentei realizar a transição por componentes e não consegui fazer.

A questão é, vamos supor que eu eu tenha uma propriedade visibility em cada componente e que o unico que não tenha é o Login, após resolver a function submit dentro do Login, ele enviaria um prop para dizer para o component Agree se "revelar" e assim sucessivamente. Não sei se isso é possível alguém pode ajudar nessa dúvida? Eu li um pouco de componentes dinâmicos, mas ainda sim estou um pouco confuso.

6
  • Possível é, mas eu te indicaria fazer isso via vue-router
    – Guto
    1/11/2020 às 16:28
  • Pode me orientar como fazer então? 1/11/2020 às 16:55
  • 1
    de uma olhada na documentação, ela é bem didática router.vuejs.org
    – Guto
    1/11/2020 às 18:33
  • Estou lendo e tentando replicar, mas grande parte dos exemplos, mostram um nav, eu gostaria de que ação acontecesse dentro de cada component, tem algum exemplo? 1/11/2020 às 21:12
  • 1
    Obrigado @Guto, eu consegui, vou ver se eu disponibilizo um exemplo disso no git pro pessoal 1/11/2020 às 21:22

1 Resposta 1

1

Você pode fazer isso sem utilizar o vue-router, apenas com o componente especial Component. Este componente é um container para outro componente que é carregado dinamicamente de acordo com o nome definido na prop is. A documentação diz melhor:

Um “componente meta” para renderizar componentes dinâmicos. O componente real a renderizar é determinado pelo propriedade is:

https://br.vuejs.org/v2/api/index.html#component

<!-- um componente dinâmico controlado -->
<!-- pela propriedade `componentId` na vm -->
<component :is="componentId"></component>

<!-- pode também renderizar um componente registrado ou componente passado como propriedade -->
<component :is="$options.components.child"></component>

Fiz um projeto de exemplo para demonstrar como você pode implementar no seu caso:

https://codesandbox.io/s/vuemudando-componentes-ownyx

Neste projeto, o componente pai App tem uma prop (activeComponent) que define qual componente o Component deve renderizar. Os filhos alteram essa prop através de eventos, por exemplo, um botão no componente Login emite um evento para com o valor Agree, que é o nome de um compoenente; ao receber o evento, o componente pai App atualiza a prop, o que faz com que o seu Component renderize o componente Agree.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .