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

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

worked.

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.

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

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)

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.

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

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.

See https://github.com/vuejs/vue-next/issues/2249