diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts index 8c9c38b3c1f..b8eb0e47208 100644 --- a/packages/runtime-core/__tests__/componentProps.spec.ts +++ b/packages/runtime-core/__tests__/componentProps.spec.ts @@ -333,6 +333,30 @@ describe('component props', () => { }) }) + //#12011 + test('replace camelize with hyphenate to handle props key', () => { + const Comp = { + props: { + hasB4BProp: { type: Boolean, required: true }, + }, + setup() { + return () => null + }, + } + render( + h('div', {}, [ + h(Comp, { + 'has-b-4-b-prop': true, + }), + h(Comp, { + 'has-b4-b-prop': true, + }), + ]), + nodeOps.createElement('div'), + ) + expect(`Missing required prop: "hasB4BProp"`).not.toHaveBeenWarned() + }) + test('warn props mutation', () => { let instance: ComponentInternalInstance let setupProps: any diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index e07fb476788..8baa7808665 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -654,6 +654,7 @@ function validateProps( ) { const resolvedValues = toRaw(props) const options = instance.propsOptions[0] + const camelizePropsKey = Object.keys(rawProps).map(key => camelize(key)) for (const key in options) { let opt = options[key] if (opt == null) continue @@ -662,7 +663,7 @@ function validateProps( resolvedValues[key], opt, __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues, - !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)), + !camelizePropsKey.includes(key), ) } }