Using the camelCased event in the CDN cannot be triggered

[xuliangzhan]

Version

3.0.0

Reproduction link

https://jsfiddle.net/xcr4aLvy/

Steps to reproduce

CDN mode events cannot be triggered because HTML is not case sensitive

What is expected?

You want it to be triggered by the kebab-case event

What is actually happening?

The event cannot be triggered normally

[edison1105]

modify your code:
emits: ['myclick']
and
emit('myclick', e)

worked.

[xuliangzhan]

modify your code:
emits: ['myclick']
and
emit('myclick', e)

worked.

Because Props can support the camelCased & kebab-case.

props:{ showContent: String }
emits: ['myClick']
emit('myClick', e)
and
:show-content="xxx"
@my-click="xx"

It would be great if event could support kebab-case.

[edison1105]

Maybe it's a bug.props key is onMyclick and handlerName is onMyClick.they do not match. I think we should use same way to convert them to keep them matched. @posva

[edison1105]

modify your code:
emits: ['myclick']
and
emit('myclick', e)
worked.

Because Props can support the camelCased & kebab-case.

props:{ showContent: String }
emits: ['myClick']
emit('myClick', e)
and
:show-content="xxx"
@my-click="xx"

It would be great if event could support kebab-case.

recommended usage:
<child-demo @my-click="myEvent2"></child-demo>
emits: ['my-click']
emit('my-click', e)

[xuliangzhan]

modify your code:
emits: ['myclick']
and
emit('myclick', e)
worked.

Because Props can support the camelCased & kebab-case.
props:{ showContent: String }
emits: ['myClick']
emit('myClick', e)
and
:show-content="xxx"
@my-click="xx"
It would be great if event could support kebab-case.

recommended usage:
<child-demo @my-click="myEvent2"></child-demo>
emits: ['my-click']
emit('my-click', e)

Thank you for your reply.That's the way I use it now, but writing the event names for the render functions is a little bad.
<child-demo @my-click="myEvent2"></child-demo>
emits: ['my-click']
emit('my-click', e)

h(ChildDemo, {
  'onMy-click'(){}
})

😄Expect events to support both camelCased & kebab-case.

[edison1105]

because we must use the converted event name in render function.

[shadowings-zy]

It seems not a bug, but a feature. See setFullProps function in packages/runtime-core/src/componentProps.ts file.

function setFullProps(
  instance: ComponentInternalInstance,
  rawProps: Data | null,
  props: Data,
  attrs: Data
) {
  const [options, needCastKeys] = instance.propsOptions
  if (rawProps) {
    for (const key in rawProps) {
      const value = rawProps[key]
      // key, ref are reserved and never passed down
      if (isReservedProp(key)) {
        continue
      }
      // prop option names are camelized during normalization, so to support
      // kebab -> camel conversion here we need to camelize the key.
      let camelKey
      if (options && hasOwn(options, (camelKey = camelize(key)))) {
        props[camelKey] = value
      } else if (!isEmitListener(instance.emitsOptions, key)) {
        // Any non-declared (either as a prop or an emitted event) props are put
        // into a separate `attrs` object for spreading. Make sure to preserve
        // original key casing
        attrs[key] = value
      }
    }
  }

  if (needCastKeys) {
    const rawCurrentProps = toRaw(props)
    for (let i = 0; i < needCastKeys.length; i++) {
      const key = needCastKeys[i]
      props[key] = resolvePropValue(
        options!,
        rawCurrentProps,
        key,
        rawCurrentProps[key],
        instance
      )
    }
  }
}

Any non-declared (either as a prop or an emitted event) props are put into a separate attrs object for spreading. Make sure to preserve original key casing.

[posva]

See #2249