Vue: passing listeners through functional component with JSX

[alexeyMohnatkin]

Version

2.5.13

Reproduction link

https://codesandbox.io/s/o7mxm731n6

Steps to reproduce

Try to pass listeners like this

const Decorator = {
  functional: true,
  render(h, {props, listeners}) {
    return (
      <DecoratedComponent
        {...{ props, listeners }}
      />
    );
  }
};

export default Decorator;

What is expected?

events emitted from DecoratedComponent should be emitted from Decorator to it's parent component

What is actually happening?

parent component doesn't receive anything

---

There's no examples in docs, so maybe I'm using it wrong way

[posva]

listeners is just an alias for data.on. I'm not sure about the syntax in jsx to only pass the on: listeners but you can spread the whole data object from context

<MyButton
        {...props}
        {...data}
      />

or

{...{on: listeners}}

If there's something not working that should work (everything looks fine to me), you can fire an issue on https://github.com/vuejs/babel-plugin-transform-vue-jsx.
Also, if you think we could improve docs by adding some sample code to the guide, make sure to open a PR there too 🙂 (https://github.com/vuejs/vuejs.org/)