[Feature Request] JSX equivalents for passing $attrs and $listeners introduced in Vue 2.4

[KagamiChan]

Vue 2.4 provides new API $attrs and $listeners to ease creating wrapper components, the example given, however, is in vue template syntax. Could we have equivalents for these APIs, especially in object spread form?

I've read through the readme and #1 and #51, but did not find an answer. In my experiment, {...{ this.$attrs } and { ...this.$attrs } do not seem to work. Please correct me if I've missed something.

[nickmessing]

@KagamiChan, I'll do some research and come back with an update asap.

[zhanziyang]

try this:

render(h) {
  const attributes= {
    attrs: this.$attrs,
    listeners: this.$listeners
  }

  return <div  {...attributes}></div>
}

It works for me.

[nickmessing]

@zhanziyang's solution works, btw, you don't have to use have h argument anymore ;)

[KagamiChan]

I don't quite understand what actually happens, but it do work, thanks @zhanziyang

@nickmessing will this be standard usage for these API, or are you thinking of some new syntaxes?

[nickmessing]

@KagamiChan, at the moment I'm focusing on replicating v-model in JSX, after that I'll try actually using JSX for a while and will figure out what can be improved

[nickmessing]

@KagamiChan, spread is computed in the runtime now and it doesn't support plain objects, just objects like:

(<tag {...{ domProps: {}, attrs: {}, listeners: {} }}/>

@yyx990803, do you thing we should support { ...this.$attrs } - like syntax? I'd like to. Then we could support #89 in spread too.

[nickmessing]

Anyway, this issue is related to vuejs/babel-helper-vue-jsx-merge-props, I'll try to change it.

[ljwrer]

<tag {...{ domProps: {}, attrs: {}, listeners: {} }}/> not work for me,but <tag {...{ domProps: {}, attrs: {}, on: {} }}/> works well

[nickmessing]

@ljwrer, you're right, it's not listeners, I'll add a note to documentation with more detailed spread description, it accepts: domProps, attrs, on, nativeOn and hook