Sometimes, we want to pass props dynamically to dynamic component in Vue.js.
In this article, we’ll look at how to pass props dynamically to dynamic component in Vue.js.
How to pass props dynamically to dynamic component in Vue.js?
To pass props dynamically to dynamic component in Vue.js, we can use the v-bind directive.
For instance, we write
<component :is="currentComponent" v-bind="currentProperties"></component>
in the template to pass all the properties in the currentProperties as props to the dynamic component component.
We set the component to load by setting the isprop to thecurrentComponent` component name string.
Then in the component code, we write
//...
export default {
//...
data() {
return {
currentComponent: "myComponent",
};
},
computed: {
currentProperties() {
if (this.currentComponent === "myComponent") {
return { foo: "bar" };
}
},
},
//...
};
//...
to add the data metjod to return the value of currentComponent.
And we add the currentProperties computed property to return the prop object for the myComponent component.
Conclusion
To pass props dynamically to dynamic component in Vue.js, we can use the v-bind directive.
