GUIPSS

Vue.js : Pass all props to child components

Posted on: 2018-08-23

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.