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 the
currentComponent` 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.