Hands-on Vue.js: Build a fully functional SPA/

...

/

Dynamic Components

Dynamic Components

Learn about dynamic components in Vue.js.

We'll cover the following...

Vue.js provides the functionality to dynamically switch between components based on certain events. Dynamic components are a type of component that can be used to display different components when required. The <component></component> placeholder is placed where you want all the components to be displayed. The v-bind:is directive is used to bind the respective component to the <component></component> placeholder. Dynamic components are usually used to display content in tabs where one tab is active at a time while others hide.

Syntax

The component placeholder can be the place where the dynamic components need to be rendered and the v-bind:is directive defines which component will be displayed currently. The following code snippet shows how dynamic components can be used.

JavaScript (JSX)
<!-- The component placeholder -->
<component v-bind:is="currentcomponent"></component>
<!-- The component_1 will be renderred if currentcomponent = component_1 -->
currentcomponent = component_1;
<!-- component_1 and component_2 defined -->
var component_1 = {
    template: `<h1>This is component 1</h1>`
}
var component_2 = {
    template: `<h1>This is component 2</h1>`
}

Indexing the components

The components that take the place of the <component></component> ...