[Vue @Component] Dynamic Vue.js components with the component element

You can dynamically switch between-a template by using the reserved <component> element and dynamically bind to it S is attribute. By using your <keep-alive> can tell Vue to keep the component in memory.

In the previous post about dynamic component

<Component: is= "selectedcomp"></Component><Script>Import Vue from"Vue"Import {Component, Prop} from"Vue-property-decorator"Const One={functional:true, Name:" One", Render:h= <H1 class="bg-red"> One</h1>}const={functional:true, Name:" Both", Render:h= <H1 class="Bg-green"> Both</h1>}const Three={functional:true, Name:"three", Render:h= <H1 class="Bg-purple">three</h1>} @Component ({components : {}}) exportdefaultclass App extends Vue {comps=[One, the other, three] Selectedcomp=  This. comps[0]}</Script>

Because inside @Component ({components: {}}) Haven ' t register those Component ' one, both, three ', so then using

<:is = "Selectedcomp"></component>

' Selectedcomp ' have to Ben a real functional component.

But If we are registered the components:

@Component ({components  : {One     , both, three  }})

The ' Selectedcomp ' can be just component ' s name:

Selectedcomponent = ' One ' | ' Both ' | ' Three '

<keep-alive> Component:

Components might has some state, your want to keep the state instead of losting it, you can use ' keep-alive ' component:

< keep-alive >    <  v-bind:is= "CurrentView"  v-bind:initial-quantity= "Item.quantity" V-bind:name = "Item.text" V-bind:diet = "Item.diet" ></ Component > </ keep-alive >

[Vue @Component] Dynamic Vue.js components with the component element