How to pass a component as props and use it in a child component in Vue.js?

Sometimes, we want to pass a component as props and use it in a child component in Vue.js.

In this article, we’ll look at how to pass a component as props and use it in a child component in Vue.js.

How to pass a component as props and use it in a child component in Vue.js?

To pass a component as props and use it in a child component in Vue.js, we can use the component component.

For instance, we write

<template>
  <div>
    <component :is="childComponent">something</component>
  </div>
</template>

to add the component component.

We set the is prop to the childComponent string which has the name of the component we want to render.

Conclusion

To pass a component as props and use it in a child component in Vue.js, we can use the component component.