Vuejs: Is it possible to render multi-Components after firing actions within each of them?

Asked

Viewed 81 times

0

Well, I created a Root Component called Index.Ve and in it I registered 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>

What I’d like to do are transitions, but without the "animations," well, I have a transition within the Login component, I tried to perform the component transition and I couldn’t do.

The point is, let’s assume I have a visibility property on each component and the only one I don’t have is Login, after solving Function Submit within Login, it would send a prop to say to the Component Agree if "reveal" and so on. I do not know if it is possible someone can help in this doubt? I read some dynamic components, but I’m still a little confused.

vue.js components

  • It’s possible, but I would advise you to do it via vue-router

  • You can tell me how to do it then?

  • 1

    from a glance at the documentation, it is very didactic https://router.vuejs.org/

  • I’m reading and trying to replicate, but most of the examples show a nav, i would like that action to happen within each Component, have some example?

  • 1

    Thanks @Guto, I got it, I’ll see if I can provide an example of this in git pro personal

  • Post here as an answer.

Show 1 more comment

1 answer

1


You can do this without using the Vue-router, only with the special component Component. This component is a container for another component that is dynamically loaded according to the name defined in prop is. The documentation says better:

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>

I made an example project to demonstrate how you can implement in your case:

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

In this project, the parent component App has a prop (activeComponent) defining which component the Component should render. Children change this prop through events, for example a button in the component Login issues an event for the amount Agree, which is the name of a performer; upon receiving the event, the parent component App updates the prop, which causes your Component render the component Agree.

Browser other questions tagged vue.js components

You are not signed in. Login or sign up in order to post.