Vue.js : Pass all props to child components

Posted on: 2018-04-21

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.