diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts index 7c90a54a12b..a97c9d48190 100644 --- a/packages/runtime-core/__tests__/componentProps.spec.ts +++ b/packages/runtime-core/__tests__/componentProps.spec.ts @@ -319,6 +319,25 @@ describe('component props', () => { expect(`Missing required prop: "num"`).toHaveBeenWarned() }) + // #3495 + test('should not warn required props using kebab-case', async () => { + const Comp = { + props: { + fooBar: { type: String, required: true } + }, + setup() { + return () => null + } + } + render( + h(Comp, { + 'foo-bar': 'hello' + }), + nodeOps.createElement('div') + ) + expect(`Missing required prop: "fooBar"`).not.toHaveBeenWarned() + }) + test('merging props from mixins and extends', () => { let setupProps: any let renderProxy: any diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 39c15471f80..3ea727ddcc3 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -480,7 +480,12 @@ function validateProps( for (const key in options) { let opt = options[key] if (opt == null) continue - validateProp(key, resolvedValues[key], opt, !hasOwn(rawProps, key)) + validateProp( + key, + resolvedValues[key], + opt, + !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)) + ) } }