Dynamic Components In Vue

Mahfuzur Rahman - Nov 9 '23 - - Dev Community

Dynamic components allow you to switch between different components based on a condition without using multiple conditional statements. To create a dynamic component, use the reserved tag with the 'is' attribute.

<component v-bind:is="currentComponent"></component>
Enter fullscreen mode Exit fullscreen mode

In your Vue.js instance, you can update the value of 'currentComponent' to switch between components.

new Vue({
  el: '#app',
  data: {
    currentComponent: 'component-a'
  },
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
});
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . .
Terabox Video Player