Vue: How to add props to children elements using render function?

[cloudever]

What problem does this feature solve?

Suggest I write a template:

<lib-button-group gutter="4px">
  <lib-button>Default</lib-button>
  <lib-button type="primary">Primary</lib-button>
</lib-button-group>

I need pass gutter to children without modifying the template code.

So I have the following button-group component

export default {
  name: 'lib-button-group',
  props: {
    gutter: {
      type: String,
      default: null,
    },
  },
  render(h) {
    const className = ['button-group'];

    return h('div', {
      class: className,
    }, [this.$slots.default]);
  },
};

And the button component:

export default {
  name: 'lib-button',
  props: {
    type: String
  },
  render(h) {
    const style = {
       // How to add it from parent `button-group` another way throught props?
      marginRight: this.$parent.marginRight,
    };

    return (
      h('button', {
        style,
      }, [this.$slots.default]) // What should I write here?
    );
  },
};

P.S. I'm react.js coder and new to vue.js

What does the proposed API look like?

Can I use something like React.cloneElement?

[posva]

Please use the forums or chat to ask questions