Vue.js Dynamic Components Simple Dynamic Components Example
Example
Dynamically switch beetween multiple components using <component> element and pass data to v-bind:is attribute:
Javascript:
new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "<p>Home</p>"
},
about: {
template: "<p>About</p>"
},
contact: {
template: "<p>Contact</p>"
}
}
})
HTML:
<div id="app">
<component v-bind:is="currentPage">
<!-- component changes when currentPage changes! -->
<!-- output: Home -->
</component>
</div>
