Vue.js : Pass all props to child components
Passing all props from a component to a child component in Vue is generally considered not a good thing to do... but you might want to do it anyway because you know what you are doing 😉 I'll try to write a post on how to avoid such a pattern later, but here it is :
Let's say you are using a framework that provide you with a component named VMenu
, and you want to wrap that component in your own component (MyMenu
) and pass all the props :
export default {
name : `MyMenu`,
functional : true,
render (createElement, context) {
return createElement(`div`, {}, [
createElement(`v-menu`, {
props : {
...context.props,
aPropYouWantToOverride : `value`,
},
}, [
context.slots().default, // also pass default slot to child
createElement(`template`, { slot : `activator` }, context.slots().activator), // passing another named slot (named "activator")
]),
]);
},
};
The important thing here is to create a functionnal
component, because that will automatically take all the props given to our MyMenu
component and put them in the context
object.