[3.2.0] camelCase props issue about babel-plugin-transform-vue-jsx HOT 4 CLOSED

I see. It works great. Thanks so much.

from babel-plugin-transform-vue-jsx.

Hmm, I guess this makes it technically a breaking change...

However, I think you can preserve the same component interface simply by changing the internal implementation. Instead of expecting a prop and calling it, emit an event instead:

// before
this.onChange && this.onChange(e)

// after
this.$emit('change', e)

The consumer of the component don't have to change anything. Would this work in your case?

from babel-plugin-transform-vue-jsx.

Sure, this.$emit works, but it has a problem the parent component needs to assign a ref name in each <Select /> every time. That's inconvenient.

mounted() {
  this.$refs.select1.$on('change', ...)
  this.$refs.select2.$on('change', ...)
},
render(h) {
  return (
    <div>
      <Select ref="select1" />
      <Select ref="select2" />
    </div>
  )  
}

from babel-plugin-transform-vue-jsx.

No, the parent can keep the exact same usage:

<Select onChange={()=>{ ... }}/>

Because onChange is now registered as a component event listener and will listen to $emit('change') from the child.

from babel-plugin-transform-vue-jsx.