vue编译器的mergeProps问题
- 使用
@vue/babel-plugin-jsx插件时,编译器会默认开启一个mergeProps: true的属性 - 在一个组件上,如果传入多个同名的class / style / onXXX handlers,会合并成一个数组,比如
 
export default defineComponent({
  name: 'StringFiled',
  props: FiledPropsDefine,
  setup(props) {
    let customerChange = (e: any) => {
      const value = e.target.value
      props.onChange(value)
    }
    const TextWidgetRef = getWidget(CommonWidgetNames.TextWidget)
    return () => {
      const TextWidget = TextWidgetRef.value
      const { onChange } = props
      return <TextWidget onChange={props.onChange} onChange={customerChange} /> //这里两个onChange会合成一个数组,而不会覆盖掉
    }
  },
})
- 可以在
babel.config.js文件中,通过设置plugins: [['@vue/babel-plugin-jsx', { mergeProps: false }]],关闭掉